vesh-cli
Version:
码农村nodejs版本VESH框架脚手架搭建器
211 lines • 12.2 kB
JavaScript
(function(V, W, $) {
//实现按照columns{列值:{name:'列名',input:checkbox/radiobox}}为基本填充规则的列定义
V.registScript('../../Part/ref/zTreeStyle.css;../../Part/ref/jquery.ztree.core-3.5.min.js;../../Part/ref/tree.css', function(path, vm) {
var _ = this,
__ = {}; {
V.inherit.apply(_, [W.Control, [V.getValue(path, '<ul class="ztree"></ul>'), V.getValue(vm, {
data: {
isChecked: false
}
})]]);
__.onLoad = _.onLoad;
__.render = _.render;
__.datas = {};
__.nodes = {};
_.addDesc('Tree.js\r\n使用zTree制作\r\n数据格式:{ID:"",name:"",isParent:true/false}');
_.addDesc('属性\r\n');
_.addDesc('menu\t {新增:{name:"操作ID",icon:"url"},删除:**}格式定义也可简写为{新增:"add"},并在onMenuClick事件中监听D.name区分不同命令');
_.addDesc('value\t 更新对应节点{ID,name,isParent}的属性注意ID属性如果修改相当于重新选中并自动设置checkbox');
_.addDesc('add\t 在value节点下添加新的节点并排在最后{ID,name,isParent:true/false}');
_.addDesc('remove\t 在value节点下删除新的节点{ID 必需,name,isParent:true/false}');
_.addDesc('radio\t true/false/all 值为all表示整颗树排重，true表示分支排重。false关闭显示radio框 分别监听oncheck方法和设置value对象的checked属性(true/false)用于获取和监听check选项 并可以通过ids获取全部check对象');
_.addDesc('checked\t true/false 分别监听oncheck方法和设置value对象的checked属性(true/false)用于获取和监听check选项 并可以通过ids获取全部check对象');
_.addDesc('empty\t 刷新整棵树');
_.addDesc('values\t [{ID,name,isParent}] 数组方式添加一系列子节点一般用于Expend时的加载使用');
_.addDesc('事件：\r\n onExpend(value) 仅在树或者子树第一次加载时调用 可用于动态加载子菜单，特别地在首次加载时value值为空，请注意处理');
_.addDesc('onClick\t(value) 点击事件');
_.addDesc('onMenuClick\t(value,name) 菜单点击事件');
_.addDesc('定义 tree: {path: "zTreeStyle.css;jquery.ztree.core-3.5.min.js;../../Style/module/part/tree.css;../../Scripts/module/part/tree.js" },');
__.setting = {
check: {
enable: false
},
callback: { //回调函数
onRightClick: function(e, id, json, flag) {
if (_.menu && json) {
json.clickFlag = flag;
_.menu.css({ top: e.clientY - 10, left: e.clientX - 10, display: 'block' }).show();
_.menu.focus();
__.nodes[json.ID] = json;
_.vm.data.value = V.merge({}, __.datas[json.ID]);
}
V.stopProp(e);
return false;
}, //处理为菜单事件
onClick: function(e, id, json, clickFlag) {
json.clickFlag = clickFlag;
__.nodes[json.ID] = json;
_.vm.data.value = null;
_.call('click', { value: V.merge({}, __.datas[json.ID]) });
},
onCheck: function(e, id, json) {
__.nodes[json.ID] = json;
_.vm.data.value = null;
var nodes = _.tree.getCheckedNodes(true);
var sb = V.sb();
for (var i = 0, l = nodes.length; i < l; i++) {
if (!nodes[i].isParent) { //isParent判断是否为父级，也就是是否有下级
sb.append(nodes[i].name).append(","); //获取所选节点的名称
}
}
if (__.datas[json.ID]) __.datas[json.ID].checked = json.checked;
_.call('check', { value: V.merge({}, __.datas[json.ID]), ids: sb.clear().trim(',') });
},
onExpand: function(e, id, json) {
__.nodes[json.ID] = json;
_.vm.data.value = null;
if (!json.children)
_.call('expand', { value: V.merge({}, __.datas[json.ID]) });
}
},
view: {
showIcon: false,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: 'id',
pIdKey: 'pid',
rootPId: null
}
}
};
}
_.onLoad = function(node) {
_.addDesc('事件定义:\r\nexpand:扩展事件 tree控件会传递children对象需要判断data.value为空或者data.value.isParent为真而且data.value.children为空时调用\r\nclick:点击事件\r\n');
__.setting.treeObj = node;
V.forC(_.events, function(k, v) {
switch (k.toLowerCase()) {
case 'expand':
break;
case 'click':
break;
case 'check':
break;
case 'move':
break;
case 'menuclick':
break;
default:
_.bindEvent(_.node, k, v);
break;
}
}, function() {
__.onLoad(node);
_.tree = $.fn.zTree.init(node, __.setting, null);
node[0].oncontextmenu = function() { return false; }
//第一次触发扩展事件
_.call('expand', { value: null });
});
};
//_.fill = function () { return { value: _.tree ? _.tree.getSelectedNodes() : null} }; //todo
_.render = function(data) {
V.forC(data, function(k, v) {
switch (k.toLowerCase()) {
case 'radio':
//level/all
if (v) {
__.setting.check = {
enable: true,
chkStyle: "radiobox", //复选框
radioType: v == true ? "level" : v
};
V.include('../../Part/ref/jquery.ztree.excheck-3.5.js');
_.tree.destroy();
_.tree = $.fn.zTree.init(__.setting.treeObj, __.setting, null);
_.call('expand', { value: null });
} else delete __.setting.check;
break;
case 'checked':
if (v) {
__.setting.check = {
enable: true,
chkStyle: "checkbox", //复选框
chkboxType: {
"Y": "s",
"N": "ps"
}
};
V.include('../../Part/ref/jquery.ztree.excheck-3.5.js');
_.tree.destroy();
_.tree = $.fn.zTree.init(__.setting.treeObj, __.setting, null);
_.call('expand', { value: null });
} else delete __.setting.check;
break;
case 'values':
var vals = [];
V.each(v, function(v2) {
__.datas[v2.ID] = v2;
vals.push({ ID: v2.ID, name: v2.name, isParent: v2.isParent, checked: !!v2.checked });
}, function() {
var pnode = _.vm.data.value ? __.nodes[_.vm.data.value.ID] : null;
_.tree.addNodes(pnode, vals);
});
break;
case 'value':
if (v.ID && __.nodes[v.ID]) {
__.datas[v.ID] = V.merge({}, v);
V.merge(__.nodes[v.ID], { ID: v.ID, name: v.name, isParent: v.isParent, checked: !!v.checked }, true);
//兼容check模式
_.tree.updateNode(__.nodes[v.ID]);
}
break;
case 'add':
if (_.vm.data.value && _.vm.data.value.ID && __.nodes[_.vm.data.value.ID]) {
__.datas[v.ID] = v;
var pnode = _.vm.data.value ? __.nodes[_.vm.data.value.ID] : null;
_.tree.addNodes(pnode, [{ ID: v.ID, name: v.name, isParent: v.isParent, checked: !!v.checked }]);
}
break;
case 'remove':
if (v.ID && __.nodes[v.ID]) {
delete __.datas[v.ID];
_.tree.removeNode(__.nodes[v.ID]);
delete __.nodes[v.ID];
}
break;
case 'empty':
_.tree.destroy();
_.tree = $.fn.zTree.init(__.setting.treeObj, __.setting, null);
__.datas = {};
__.nodes = {};
break;
case 'menu':
if (v) {
if (_.menu) _.menu.remove();
_.menu = V.newEl('div', 'c_tree', '').hide().on('click', 'span', function(e) {
var _this = $(this);
var par = _this.parent('div');
if (par.attr('name')) {
_.call('menuclick', { name: par.attr('name') });
_.menu.hide();
}
}).hover(function() {}, function() { $(this).hide(); }).appendTo(document.body);
_.menu[0].oncontextmenu = function() { return false; }
var menu = V.newEl('div', 'c_tree_inner', '').appendTo(_.menu);
V.forC(v, function(k2, v2) {
var item = V.newEl('div', 'c_tree_item', '').appendTo(menu);
if (!v2.name) v2 = { name: v2, icon: '' };
item.attr('name', v2.name).append('<span class="c_tree_icon" style="background-image:url(' + v2.icon + ');"> </span><span class="c_tree_name">' + k2 + '</span>');
});
} else if (_.menu) _.menu.remove();
break;
}
},
function() {
data = __.render(data);
});
}
});
})(VJ, VJ.view, jQuery);