如何将zTree选中节点传递给后台
获取zTree选中节点
<body>
<script type="text/javascript">
var setting = {
view: {
dblClickExpand: false,
showLine: true,
},
check: {
enable: true, //必选项
chkboxType: { "Y": "p", "N": "s" }, //Y被勾选,N没有勾选情况,p操作影响父节点,s影响子节点
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId:
}
},
callback: {
onCheck: onCheckNode //回调函数,获取选节点
}
};
var zNodes = [
{ id: , pId: , name: "[excheck] 复/单选框功能 演示", open: true },
{ id: , pId: , name: "Checkbox 勾选操作", file: "excheck/checkbox" },
{ id: , pId: , name: "Checkbox nocheck 演示", file: "excheck/checkbox_nocheck" },
{ id: , pId: , name: "Checkbox chkDisabled 演示", file: "excheck/checkbox_chkDisabled" },
{ id: , pId: , name: "Checkbox halfCheck 演示", file: "excheck/checkbox_halfCheck" },
{ id: , pId: , name: "Checkbox 勾选统计", file: "excheck/checkbox_count" },
{ id: , pId: , name: "用 zTree 方法 勾选 Checkbox", file: "excheck/checkbox_fun" },
{ id: , pId: , name: "Radio 勾选操作", file: "excheck/radio" },
{ id: , pId: , name: "Radio nocheck 演示", file: "excheck/radio_nocheck" },
{ id: , pId: , name: "Radio chkDisabled 演示", file: "excheck/radio_chkDisabled" },
{ id: , pId: , name: "Radio halfCheck 演示", file: "excheck/radio_halfCheck" },
{ id: , pId: , name: "用 zTree 方法 勾选 Radio", file: "excheck/radio_fun" }
];
$(document).ready(function () {
var treenode = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
$('#didClick').click(function () {
$.ajax({
url: '/handler/ajax.ashx',
type: 'POST',
async: true,
data: {
PostMethod:"checkedBox",
nodesJson: chkNodeStr
},
dataType: 'json',
success: function (data) {
console.log(data)
},
error: function (xhr, textStatus) {
console.log(xhr)
console.log(textStatus)
},
});
});
});
var chkNodeArr;
var chkNodeStr="";
var nodeJson = [];
function onCheckNode() {
var treenode = $.fn.zTree.getZTreeObj("treeDemo");
chkNodeArr = treenode.getCheckedNodes(true); //true获取选中节点,false未选中节点,默认为true
for (var i = ; i < chkNodeArr.length; i++) {
nodeJson[i] = { "name": chkNodeArr[i].name, "id": chkNodeArr[i].id };
}
//console.log(chkNodeArr);
chkNodeStr = JSON.stringify(nodeJson);
}
</script>
<div>
<ul id="treeDemo" class="ztree"></ul>
<button type="button" id="didClick">提交</button>
</div>
</body>
后台解析json字符串,使用Newtonsoft
1,引用 using Newtonsoft.Json.Linq;
2,因为是数组所以用JArray解析,对象可以用JObject
if (method == "checkedBox") {
string jsonStr = context.Request["nodesJson"];
JArray ja = JArray.Parse(jsonStr);
Dictionary<string, string> dic = new Dictionary<string, string>();
foreach (JToken str in ja) {
dic.Add(str["name"].ToString(),str["id"].ToString());
}
}
附上 zTree 官网 api 和 Newtonsoft.json 文档
如何将zTree选中节点传递给后台的更多相关文章
- 通过ajax 后台传递的 区域id 选中ztree的节点 并展开节点
代码如下: < script type = "text/javascript" > var flag = "<%=request.getParam ...
- zTree勾选状态的禁用节点不在选中节点里
问题描述: 由于业务需求,需要将一部分节点设置为选中并且是禁用的状态.设置这部分节点的chkDisabled和checked属性值都为true.在zTree树上这部分节点是选中且禁用的状态,但是在保存 ...
- ztree设置节点checked，选中某节点等相关操作
ztree设置节点checked,选中某节点等相关操作 1.根据id获取树的某个节点: var zTree = $.fn.zTree.getZTreeObj("mytree"); ...
- zTree设置选中节点之后出现重复节点
1.用户离开页面时最后一次点击的节点信息我会保存到数据库. 2.用户打开页面时默认选中上一次离开时选中的节点. 现在发现在设置选中节点之后,会出现重复的节点(重复现象偶尔出现). 以下是代码: var ...
- ztree 获取当前选中节点的子节点集合
功能:获取当前选中节点的子节点id集合. 步骤:1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值 ...
- ztree获取选中节点
$(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); functi ...
- ztree获取选中节点时不能进入可视区域出现BUG如何解决
zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进 ...
- 160420、zTree获取所有选中节点数据
<!DOCTYPE html><HTML><HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE> ...
- ztree 获取CheckBox选中节点时，不获取选中上级父节点
//将第三个参数改为false,表示不去勾选父节点下的所有子节点 zTreeObj.checkNode(node, true, false); setting.check.chkboxType = { ...
随机推荐
- redis安装zmalloc.h:50:31: 致命错误：jemalloc/jemalloc.h：没有那个文件或目录
问题: zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录 解决方案:执行命令:make MALLOC=libc make MALLOC=libc
- 1 jquery对checkbox的简单操作
//全选和全不选 votefunction selectAll(){ if($(":checkbox").prop('checked')){ //$(":chec ...
- mpvue框架的小程序和H5同时开发
demo链接1.样式统一为了达到共用一套样式,采用px2rem-loader和px2rpx-loader进行代码的打包,细节如下: 由于UI设计图是在蓝湖上标注,宽度750,选择像素 PX 样式中直接 ...
- [LC] 8. String to Integer (atoi)
Implement atoi which converts a string to an integer. The function first discards as many whitespace ...
- JAVA线程笔记。
继承thread类 并覆写thread类中的run()方法. class 类名称 extents Thread{public void run(){}}实现Runble接口的run方法 线程的star ...
- django Field选项中null和blank的区别
blank只是在填写表单的时候可以为空,而在数据库上存储的是一个空字符串:null是在数据库上表现NULL,而不是一个空字符串: 需要注意的是,日期型(DateField.TimeField.Date ...
- 题解：线性规划与网络流24题 T2 太空飞行计划问题
太空飞行计划问题 问题描述 W教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,-,Em},和进行这些实验需要 ...
- radar chart
多变量数据 雷达图radar chart 如上图可知,雷达图的缺点是看不清,此时可采用线性变换(相差小)or对数变换(相差大)的方法使得图像展开. 但是第一幅图用于比价种类比较鲜明,而第二幅图虽然比较 ...
- 玩转UITableView
UITableView这个iOS开发中永远绕不开的UIView,那么就不可避免的要在多个页面多种场景下反复摩擦UITableView,就算是刚跳进火坑不久的iOS Developer也知道实现UITa ...
- [JS奇怪的世界]No.55 危險小叮嚀：陣列與for in
前言 前面已經瞭解了使用內建函數建構子的某些危險地方,但其實陣列與for in,也是有一些危險的地方. 陣列與for in 在前面幾個章節有講過陣列就是物件,所以我們一樣可以使用 for in來做處理 ...