<select id="cc" style=" 250px"></select>
<div id="sp">
<div style="color: #99BBE8; background: #fafafa; padding: 5px;">
<input id="roleSearch" class="easyui-searchbox" data-options="prompt:'请输入角色名',searcher:doSearch" style=" 200px"></input>
</div>
<div style="position: absolute; height: 200px; overflow: auto">
<div style="padding: 10px;">
<ul id="roleTree" class="easyui-tree"></ul>
</div>
</div>
</div>
<script>
$(function(){
$('#cc').combo({
editable: false,
panelHeight: 250,
onShowPanel: function () {
$("#roleSearch").textbox('setValue', '');
$('#roleTree').tree({
url: 'EditUser.aspx?action=bindrole'
})
}
});
$('#sp').appendTo($('#cc').combo('panel'));
$('#roleTree').tree({
checkbox: true,
url: 'EditUser.aspx?action=bindrole',
onCheck: function (node, checked) {
var nodes = $('#roleTree').tree('getChecked');
var delID = [];
var roletext = [];
$.each(nodes, function (index, item) {
delID.push(item.id);
roletext.push(item.text);
});
$('#hiderole').val(delID.join(","));
$('#cc').combo('setText', roletext.join(',')); },
onLoadSuccess: function () {
$("#roleTree").tree("collapseAll");
}
});
/角色搜索 function doSearch(value) {
if (value != "") {
$.ajax({
type: "post",//使用get方法访问后台
dataType: "json",
url: "RolesManage.aspx?action=searchRole",
data: { rolename: value },
cache: false,
success: function (data) {
$('#roleTree').tree('loadData', data);
}
});
} else {
$('#roleTree').tree({
url: 'EditUser.aspx?action=bindrole'
})
}
}
})
</script>