首页 > 代码库 > DWZ (JUI) 教程 tree 控件的选中事件
DWZ (JUI) 教程 tree 控件的选中事件
DWZ (JUI) 教程 tree 控件的选中事件
先简单说一下流程
第一步 当然是先定义好回调事件了
function checkCallback(json){......................}
关键是回调函数返回的结构 {checked:布尔值, items:数组}
如果是选中事件 checked 为 true 否则为false
items 是个对象数组 [ {name:, value:, text: },{} ] 是返回是选中的节点，如果返回的checked 为false 就是反选事件 ，那么它的长度就会是0
name 就是节点名称 value 就是对应的值 text 就是节点对应的文本 对应 节点的 tname tvalue ，<a>text</a> 文本信息
tree控件自动是级联的，选中父节点，子节点也会选中，所以返回的的选中节点是个数组，当然如果是叶子节点，那么它的长度就是1
第二步 就是注册到dom元素上
<ul class="tree treeFolder treeCheck expand" oncheck="checkCallback">
这样就可以了 其实使用起来 也挺方便。
setTimeout(function(){ if($this.hasClass("treeCheck")){ //获取选中事件 就是注册到dom元素上的事件 var checkFn = eval($this.attr("oncheck")); if(checkFn && $.isFunction(checkFn)) { $("div.ckbox", $this).each(function(){ var ckbox = $(this); ckbox.click(function(){ //返回是事件类型 是否为选中事件 var checked = $(ckbox).hasClass("checked"); var items = []; if(checked){ //看一下源码结构 其实是获取到节点的li 元素 var tnode = $(ckbox).parent().parent(); //获取所有节点下才checkbox var boxes = $("input", tnode); if(boxes.size() > 1) { //对应我说的 返回的结构 $(boxes).each(function(){ items[items.length] = {name:$(this).attr("name"), value:$(this).val(), text:$(this).attr("text")}; }); } else { items = {name:boxes.attr("name"), value:boxes.val(), text:boxes.attr("text")}; } } //调用函数 checkFn({checked:checked, items:items}); }); }); } }
DWZ (JUI) 教程 tree 控件的选中事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。