<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="zTreeStyle.css" type="text/css">
</head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jstree.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core.js"></script>
<script type="text/javascript" src="jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="jquery.ztree.excheck.js"></script>
<style rel="stylesheet" type="text/css" charset="UTF-8">
.out{
width: 100%;
height: 100%;
}
.main{
width: 87%;
height: 100%;
border: 1px solid blue;
float: left;
overflow-y: auto;
}
.headDiv{
width: 1400px;
height: 30px;
}
/*main 中的每行div的样式*/
.outRowClass{
width: 100%;
height: 200px;
border-top: none;
border-bottom: 1px dashed #000;
overflow-y: auto;
position: relative;
}
.innerRowClass{
width: 100%;
height: 100px;
border-bottom: 1px solid green;
position: relative;
/* background-color: #aaaf5d;*/
}
/*每行每列的输入框*/
.inputClass{
width:180px;
height: 30px;
text-align: center;
}
/*每行每列的标题*/
.labelClass{
margin-left: 7%;
font-size: 16px;
}
/*每行中每列的样式*/
.cellDivContain{
float: left;
margin:0 auto;
background: #EEEEEE;
width:200px;
height:60px;
border:2px solid #AAAAAA;
border-radius:30px;
text-align: center;
position: relative;
}
/*删除每行的维度的按钮样式*/
.cellDiv_closed{
/* still bad on picking color */
color: #666666;
/* make a round button */
border-radius: 12px;
/* center text */
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
font-size: 18px;
padding: 0px;
top: -2px;
right: 20px;
position: absolute;
}
/*每行中的删除按钮*/
.rowDiv_closed{
/* still bad on picking color */
color: #666666;
/* make a round button */
border-radius: 12px;
/* center text */
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
font-size: 18px;
padding: 0px;
right: 15px;
position: absolute;
}
.cellDiv_closed::before{
content: "\2716";
}
.rowDiv_closed::before{
content: "\2716";
}
# 测试
body {
background-color: white;
margin: 0;
padding: 0;
text-align: center;
}
div, p, table, th, td {
list-style: none;
margin: 0;
padding: 0;
color: #333;
font-size: 12px;
font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}
#testIframe {
margin-left: 10px;
}
</style>
<body>
<div style="width: 200px;">
<div class="headDiv">
<input type="button" id="addCosmbine" value='添加维度'>
<input type="text" name="kkk1">
</div>
</div>
<div class="out">
<div style="border: 1px solid blue;width: 12%;height: 100%;float:left;border-right: #999999 1px dashed">
<TABLE border=0 height=600px align=left>
<TR>
<TD width=260px align=left valign=top>
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
</TR>
</TABLE>
</div>
<div class='main' id='main' name='mainsName'>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(zTree.getNodeByParam("id", 101));
var lineHeight = 50;
//添加维度并且控制每行的高度
function addCombine(id){
//获取当前页面的高度
var currentPageHeight = $(window).height();
var currentPageWidth = $(window).width();
//获取当前已经添加的行数
var elementCount = $('#main').childs();
//计算总体的高度
var allLinesHeight = parseInt(lineHeight) * parseInt(elementCount);
//设置每行的高度,重置main的新的高度
if(allLinesHeight > currentPageHeight){
addScoller();
}
createRow(id);
}
});
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
edit: {
drag: {
autoExpandTrigger: true
},
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
isCopy:true
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: zTreeBeforeClick,
beforeDrag: zTreeBeforeDrag
}
};
//点击之前的事件
function zTreeBeforeClick(treeId, treeNode){
var zTree = $.fn.zTree.getZTreeObj(treeNode);
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
return true;
}
}
//树的拖动事件
function zTreeBeforeDrag(event,treeNodes) {
$("div").on('mouseover','div',function(){
if (this.getAttribute('name') != 'rowElement') {
return;
}
var currentRoot = $(this);
var cellDivContain,lable,addNode,nodeId;
//将拖拽的信息添加到当前的div中
//根据当前的节点类型显示不同的标签
var node = treeNodes[0];
if (node === null || typeof(node) == "undefined" || node.length == 0) {
return false;
}
//获取拖拽的类型
var dragType = node.type;
if (null === dragType || "" === dragType) {
return false;
}
//获取当前的元素标签添加到div中的id
var cellId = getCellId(node.id);
if (null == cellId) {
//TODO 抛出异常
return ;
}
//判断当前id的元素是否存在 如果存在提示不能添加同类别的标签 ： id相同
var isContain = checkCellId(currentRoot,cellId);
if (isContain) {
alert("当前维度的节点已经存在，请删除后在操作");
return;
}
//创建个容器div
cellDivContain = createDivContain(cellId);
//根据当前的类型 显示那种控件1: select 标签 ； 2：输入框 ；3：单选框；4：其他
if(1 === dragType){
addNode = createSelect(cellId,node.data);
}else if (2 == dragType) {
addNode = createInput(cellId);
}else if (4 == dragType) {
}
//创建显示的id
lable = createLable(addNode.id,node.name);
cellDivContain.appendChild(lable);
cellDivContain.appendChild(addNode);
$(this)[0].appendChild(cellDivContain);
//销毁事件中的元素，防止多次默认添加
treeNodes = [];
addNode = null;
});
return false;
};
//计算当前节点最大的节点 避免重复出现 CellId 的计算方式为 C+ 维度的id
function checkCellId(currentRoot,cellId){
var elements = currentRoot.children();
if (elements.length === 0) {
return;
}
//默认是false 当前div中 不包含 添加的维度
var isContains = false;
var cells = [],item;
for (var i = elements.length - 1; i >= 0; i--) {
item = elements[i];
//判断标签的类型 当前只有 select 和 input 标签
if (item.tagName.toLocaleLowerCase() === "select") {
if (item.id === cellId) {
isContains = true;
break;
}
}
if (item.tagName.toLocaleLowerCase() === "input" && item.name === "cellElement") {
if (item.id === cellId) {
test3.rar （11个子文件） 
test3 
CWWcss.css 222B
zTreeStandard.gif 7KB jquery.ztree.core.min.js 31KB jstree.min.js 136KB jquery.ztree.exedit.js 49KB jquery.ztree.core.js 72KB test3.js 2KB
zTreeStandard.png 12KB zTreeStyle.css 6KB
test3.html 13KB jquery.ztree.excheck.js 24KB资源评论
