jquery miniui treeselect ,asp.net

来源:互联网 发布:js压缩代码还原 编辑:程序博客网 时间:2024/06/05 21:59

项目中遇到一个问题,就是下拉框选择treegrid。网上查了资料,觉得juqery miniui的treeselect还不错。分享给大家。

1.去官网下载jquery miniui。我下的是.net版本的。

2.只要把scripts这个文件夹放到项目里面就行了

3.在页面添加代码


<input id="trerselect" name="trerselect" class="mini-treeselect" url="User/GetUserTreeList" multiselect="true"   textfield="text" valuefield="id" parentfield="pid" checkrecursive="true" showfoldercheckbox="true" expandonload="true" showclose="true" 
oncloseclick="onCloseClick"  popupwidth="200" />  

这里的

url就对应后台方法的路径,

textfiled 要显示的文本,

valuefield 文本值,

parentfield 父ID

multiselect 多选,

showfoldercheckbox 显示父级选择框,

expandonload 加载后展开,

showclose 显示"X",

onCloseClick  "X" 的事件,用来清空选择的内容

4.javascript

<script type="text/javascript">   function onCloseClick(e) {              var obj = e.sender;              obj.setText("");              obj.setValue("");          }   function getValue() {              var obj = mini.get("treeslect");              return obj.getValue();          }  </script> 


5.后台方法,返回json类型的数据就可以了。数据格式如下

[
{id: "1", text: "系统管理", tag: "xitongguanli"},
{id: "2", text: "日志管理", pid: "1", tag: "rizhiguanli"},
{id: "3", text: "字典管理", pid: "1", tag: "zidianguanli"},
{id: "4", text: "部门管理", pid: "1", tag: "bumenguanli"},
{id: "5", text: "权限管理", tag: "quanxianguanli"},
{id: "6", text: "用户管理", pid: "5", tag: "yonghuguanli"},
{id: "7", text: "角色管理", pid: "5", tag: "jueseguanli"}
]

然后就可以运行了。


原创粉丝点击