js easyui 权限树 权限管理 ajax

Posted 2022-11-14 ayanboke

需要在官网下载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="width: 30%" class="btn btn-primary btn-block btn-flat" id="btn">
</div>

赋上一段json数据格式：

[
"id": 1,
"value": 1,
"text": "\u9996\u9875",
"label": "\u9996\u9875",
"checked": true,
"child": [
"id": 18,
"value": 18,
"text": "\u9996\u9875",
"label": "\u9996\u9875",
"checked": false,
"child": [],
"children": []
],
"children": [
"id": 18,
"value": 18,
"text": "\u9996\u9875",
"label": "\u9996\u9875",
"checked": false,
"child": [],
"children": []
]
,
"id": 9,
"value": 9,
"text": "\u5e94\u7528\u7ba1\u7406",
"label": "\u5e94\u7528\u7ba1\u7406",
"checked": true,
"child": [],
"children": []
,
"id": 11,
"value": 11,
"text": "\u5e7f\u544a\u4f4d\u7ba1\u7406",
"label": "\u5e7f\u544a\u4f4d\u7ba1\u7406",
"checked": false,
"child": [],
"checked":true,
"children": []
]
,
"id": 16,
"value": 16,
"text": "\u6743\u9650\u7ba1\u7406",
"label": "\u6743\u9650\u7ba1\u7406",
"checked": true,
"child": [],
"children": []
]
]

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