- 安全
traditional:true, //加上此项可以传数组
$.ajax({
type : "POST",
url : "/system_get_subject_user/",
data : {
"subjectId": curId,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
dataType : 'json',
cache : false,
success : function(result){
console.log(result)
}
})
或者
# 传输父子数据
@csrf_exempt
def system_get_subject_user(request):
result = {}
flag = '1'
fathlist = []
sub_list = []
# 获取到要取值的数据id
subjectId = request.POST.get('subjectId')
result['sublist'] = sublist
result['fathlist'] = fathlist
print(result)
result = json.dumps(result)
return HttpResponse(result, content_type="application/json")
- select选择,多选值的获取和设置
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select name="Role" id="role" multiple="multiple" >
<option value="1">你</option>
<option value="2">我</option>
<option value="3">他</option>
</select>
<button>保存</button>
</body>
</html>
<script src="jquery-1.12.1.min.js"></script>
js
//保存成功后清空select
$('#role').val("").trigger('change');
$("#role").trigger("liszt:updated");
//设置多选初始值
var arr=[1,3]
$('#role').val(arr).trigger('change');
//获取多选值的val
$('button').on('click',function(){
var o=document.getElementById('role').getElementsByTagName('option');
var all="";
console.log(o[1]);
for(var i=0;i<o.length;i++){
if(o[i].selected){
all+=o[i].value+",";
}
}
all = all.substr(0, all.length - 1);
console.log(all)
})
$.ajax({
type: "GET",
url: "/dept_role_info/",
data: {},
dataType: 'json',
cache: false,
success: function (result) {
//角色多选
var role = result.role_list;
var Rolestr = '';
$('#Role').empty()
role.forEach(function (v, i, a) {
Rolestr += '<option value="' + a[i].id + '">' + a[i].Name + '</option>'
})
$('#Role').append(Rolestr)
$("#Role").trigger("liszt:updated") //动态加载select选项,更新
}
});
- ztree多选获取,设置初始选择
//设置初始选中
t = $.fn.zTree.init(t, setting, zNodes);
var menuIds = [1,200];
for(var i = 0; i < menuIds.length; i++) {
var node = t.getNodeByParam("id", menuIds[i]);
if(node != null) {
t.checkNode(node, true)
}
}
//获取选中的树节点
var treeObj = $.fn.zTree.getZTreeObj("manageDept"),
nodes = treeObj.getCheckedNodes(true),
Dept = [];
for (var i = 0; i < nodes.length; i++) {
Dept.push(nodes[i].id);
//最后一级子部门的id
if(!nodes[i].isParent){
Dept+=nodes[i].id+','
}
}
- ztree单选获取,设置初始
var DeptModifysetting = {
check: {
enable: true,
chkStyle: "radio", //单选框
radioType: "all" //对所有节点设置单选
},
view: {
dblClickExpand: true,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick: zTreeOnClick
}
};
var DeptModifyt = $("#deptModifyTree");
DeptModifyt = $.fn.zTree.init(DeptModifyt, DeptModifysetting, zNodes);
//设置初始
var DeptModifyt = $("#deptModifyTree");
DeptModifyt = $.fn.zTree.init(DeptModifyt, DeptModifysetting, zNodes);
var node = DeptModifyt.getNodeByParam("id", curPId);
if (node != null) {
DeptModifyt.checkNode(node, true)
}
//获取
var DeptModifyt = $.fn.zTree.getZTreeObj("deptModifyTree");
var DeptPDept = DeptModifyt.getCheckedNodes();
console.log(DeptPDept)
if (DeptPDept.length != 0) {
var DeptPDeptId = DeptPDept[0].id
} else {
$("#modify_dept_modal .alert-error").html("<button class='close' data-dismiss='alert'></button>{{ text.empty_pdept }}");
$("#modify_dept_modal .alert-error").show();
return;
}
var peram = {"DeptID": DeptID, "DeptName": DeptName, "DeptPDept": DeptPDeptId}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/static/zTree/css/metroStyle/metroStyle.css">
</head>
<body>
<ul id="deptModifyTree" class="ztree" style="width:200px; overflow:auto;"></ul>
</body>
</html>
<script src="/static/zTree/js/jquery.ztree.core.js"></script>
<script src="/static/zTree/js/jquery.ztree.excheck.js"></script>
<script src="/static/zTree/js/jquery.ztree.exedit.js"></script>
- ztree单选:点击发送请求
var setting = {
check: {
enable: true,
chkStyle: "radio", //单选框
radioType: "all" //对所有节点设置单选
},
view: {
showIcon: false,
dblClickExpand: true,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick:function (e,treeId,treeNode,clickFlag) { //用于捕捉勾选时触发
alert('点击')
},
onCheck:function(){
alert('选择')
},
beforeCheck:function(){
alert('选择后')
}
}
};
var zNodes = [
{ name:"父节点1 - 展开",
children: [
{ name:"父节点11 - 折叠",
children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点113"},
{ name:"叶子节点114"}
]},
{ name:"父节点12 - 折叠",
children: [
{ name:"叶子节点121"},
{ name:"叶子节点122"},
{ name:"叶子节点123"},
{ name:"叶子节点124"}
]},
{ name:"父节点13 - 没有子节点", isParent:true}
]},
{ name:"父节点2 - 折叠",
children: [
{ name:"父节点21 - 展开", open:true,
children: [
{ name:"叶子节点211"},
{ name:"叶子节点212"},
{ name:"叶子节点213"},
{ name:"叶子节点213"},
{ name:"叶子节点213"},
{ name:"叶子节点213"},
{ name:"叶子节点213"},
{ name:"叶子节点213"},
{ name:"叶子节点213"},
{ name:"叶子节点213"},
{ name:"叶子节点213"},
{ name:"叶子节点213"},
{ name:"叶子节点214"}
]},
{ name:"父节点22 - 折叠",
children: [
{ name:"叶子节点221"},
{ name:"叶子节点222"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点223"},
{ name:"叶子节点224"}
]},
]},
{ name:"父节点3 - 没有子节点", isParent:true},
{name:"父节点4 - 展开"},
{name:"父节点5 - 展开"}
];
var t = $("#manageTree");
t = $.fn.zTree.init(t, setting, zNodes);
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>test</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<link rel="stylesheet" href="zTree/css/metroStyle/metroStyle.css">
<style>
div#rMenu {
position: absolute;
visibility: hidden;
top: 0;
text-align: left;
padding: 4px;
}
div#rMenu a {
padding: 3px 15px 3px 15px;
background-color: #cad4e6;
vertical-align: middle;
display: block;
opacity: 0.9;
}
</style>
</head>
<body class="page-header-fixed page-sidebar-fixed">
<div class="page-container">
<div class="page-content">
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">
<!-- BEGIN PAGE HEADER-->
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span4" id="jio">
<ul id="manageTree" class="ztree" style="width:800px; overflow:auto;"></ul>
</div>
</div>
</div>
<!-- END EXAMPLE TABLE PORTLET-->
</div>
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER-->
</div>
</div>
</body>
</html>
<script src="jquery-1.12.1.min.js" type="text/javascript"></script>
<script src="zTree/js/jquery.ztree.core.js"></script>
<script src="zTree/js/jquery.ztree.excheck.js"></script>
<script src="zTree/js/jquery.ztree.exedit.js"></script>
- ztree获取所有的子节点
var ChildId = '';
ChildId = getAllChildrenNodes(treeNode, ChildId);
function getAllChildrenNodes(treeNode, result) {
if (treeNode.isParent) {
var childrenNodes = treeNode.children;
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
result += childrenNodes[i].id + ',';
result = getAllChildrenNodes(childrenNodes[i], result);
}
}
}
return result;
}
ztree清空所有选中值
参数说明:
checked = true 表示勾选全部节点
checked = false 表示全部节点取消勾选
代码示例如下:
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.checkAllNodes(false);
ztree设置
不选树
//部门不选树
var settingUser = {
check: {
enable: false
},
view: {
showIcon: false,
showLine: true,
dblClickExpand: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
callback: {
onClick: zTreeOnClick
}
};
function zTreeOnClick(event, treeId, treeNode) {
console.log(treeNode.id)
console.log(treeNode)
var ChildId = '';
ChildId = getAllChildrenNodes(treeNode, ChildId);
//去掉最后一个字符,
ChildId = ChildId.substring(0, ChildId.lastIndexOf(','));
var ChildArr=ChildId.split(',')
ChildArr.push(treeNode.id)
console.log(ChildArr)
}
//获取选中节点的所有子节点
function getAllChildrenNodes(treeNode, result) {
if (treeNode.isParent) {
var childrenNodes = treeNode.children;
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
result += childrenNodes[i].id + ',';
result = getAllChildrenNodes(childrenNodes[i], result);
}
}
}
return result;
}
单选树
//部门列表树
var settingDept = {
check: {
enable: true,
chkStyle: "radio", //单选框
radioType: "all" //对所有节点设置单选
},
view: {
dblClickExpand: true,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeCheck:zTreeOnClickRadio
}
};
function zTreeOnClickRadio(event, treeId, treeNode) {
}
多选树
//部门多选树
var settingCheckAll = {
check: {
enable: true
},
view: {
showIcon: false,
showLine: true,
dblClickExpand: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
动态渲染ztree
var tUser = $("#userTree");
var tDept = $("#deptTree");
var pDept = $("#pDeptTree");
$.ajax({
type: "GET",
url: '/xxx/',
data: {},
dataType: 'json',
cache: false,
success: function (result) {
console.log(result)
var deptList=result.dept_list
deptList.forEach(function(v,i,a){
zNodesDept.push({
"id":a[i].id,
"pId":a[i].PDept,
"name":a[i].DeptName,
"open":0
})
})
tUser = $.fn.zTree.init(tUser, settingUser, zNodesDept);
tDept = $.fn.zTree.init(tDept, settingCheckAll, zNodesDept);
}
})