代码遇坑千千万,学习填坑万万千
今天因为Layui的下拉菜单树形需要自己去写,所以学习使用了easyui的combotree。
首先数据传输方面,easyui非常简单,只要传入json就可以,我这边直接写了一个JS后台调用后传入菜单json就生成了
//动态生成部门下拉菜单
function xlcd(jsd) {
var dat = JSON.parse(jsd);
$('#s_bm').combotree({
data: dat
});
}
其次是选中值的读取和设置,combotree是支持多选的。
<input class="easyui-combotree" data-options="url:'...',method:'get',cascadeCheck:false" multiple id="s_bm" style="width: 100%" runat="server" />
代码中的multiple代码支持多选,cascadeCheck:false表示不级联(选中父级可以不选子级)
function getValue() {
var val = $('#s_bm').combotree('getValues');
var sxsm = $('#s_bm').combotree('getText');
$('#h_xxj').val(val);
$('#h_sxsm').val(sxsm);
}
可以通过getvalues读取选中的ID和text,赋值给Input后后台就可以直接读Input中的值而不读下拉菜单控件了;PS:大神说不定可以直接读控件,本菜鸡做不到呀。。。
需要注意的是用服务器控件点击设置combotree选中项的时候不能直接用JS方法而需要用 window.onload,原因大家都懂得。。。(.NET服务器控件会刷新页面,调用js赋值后又会被刷新掉)
最后就是combotree的选中事件了。。。研究了好久的官方API都没弄明白怎么写,最后各种猜各种试,终于找到方法了
$(function () {
$('#s_bm').combotree({
onSelect: function (node) {
$('#h_xxj').val(node.id);
}
});
});
填坑路漫漫,前行请注意脚下。