js easyui 权限树 权限管理 ajax

需要在官网下载easyui插件，因为一个权限下拉框的问题，搜了很多代码都不能用，很费事。发现easyui比较好用，代码如下：

加载文件：

<link rel="stylesheet" type="text/css" href="/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/jquery-easyui/demo/demo.css">
<script type="text/javascript" src="/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="/jquery-easyui/jquery.easyui.min.js"></script>

<div class="easyui-panel" style="padding:5px;border: none;">
<ul id="tt" class="easyui-tree" data-options="url:'/system/tree_data?id=<?php echo isset($id)?$id:'';?>',method:'get',animate:true,checkbox:true" value="1,2,3,8,9"></ul>
</div>
<script type="text/javascript">
var s = '';
function getChecked(){
var nodes = $('#tt').tree('getChecked');
for(var i=0; i<nodes.length; i++){
if (s != '')
s += ',';
s += nodes[i].id;
}
return s;
}
</script>

这里的url /system/tree_data?id=<?php echo isset($id)?$id:'';?>',method:'get 这一段，是获取树型下拉框数据的，数据格式为json。

选择以后，发送ajax请求给后端，这里包括获取数据：

<script type="text/javascript">
$(function(){

$("#btn").click(function(){
var id = $("#gid").val();
var a = getChecked();
$.ajax({
type:"post",
url:"/system/groupchange",
data:{auth:a,groupname:$("#groupname").val(),id:id},
dataType:"json",
success:function(data){
if(data.code==200){
// alert(data.msg);
location = "/system/group";
}else{
alert(data.msg);
// document.getElementById('tip').innerHTML = data.msg;
return;
}
},
// error:function(data){
// alert("请求异常");
// // alert(data.msg);
// }
});
});
});
</script>
<!-- <?php echo $id;?> -->
<!-- /.col -->
<div class="col-xs-4">
<input type="hidden" name="id" id="gid" value="<?php echo isset($id)?$id:''; ?>" />
<input type="button" value="submit" style=" 30%" class="btn btn-primary btn-block btn-flat" id="btn">
</div>

赋上一段json数据格式：

[{
"id": 1,
"value": 1,
"text": "u9996u9875",
"label": "u9996u9875",
"checked": true,
"child": [{
"id": 18,
"value": 18,
"text": "u9996u9875",
"label": "u9996u9875",
"checked": false,
"child": [],
"children": []
}],
"children": [{
"id": 18,
"value": 18,
"text": "u9996u9875",
"label": "u9996u9875",
"checked": false,
"child": [],
"children": []
}]
}, {
"id": 9,
"value": 9,
"text": "u5e94u7528u7ba1u7406",
"label": "u5e94u7528u7ba1u7406",
"checked": true,
"child": [],
"children": []
}, {
"id": 11,
"value": 11,
"text": "u5e7fu544au4f4du7ba1u7406",
"label": "u5e7fu544au4f4du7ba1u7406",
"checked": false,
"child": [],
"checked":true,
"children": []
}]
}, {
"id": 16,
"value": 16,
"text": "u6743u9650u7ba1u7406",
"label": "u6743u9650u7ba1u7406",
"checked": true,
"child": [],
"children": []
}]
}]

权限的数据格式如上所示，以上代码改掉参数，可以直接执行。