应上级要求,项目的树列表要用ztree,那就服从命令吧。
配置
- var zTree;
- var setting = {
- view: {
- dblClickExpand: false,//双击节点时,是否自动展开父节点的标识
- showLine: true,//设置ztree是否显示节点之间的连线
- selectedMulti: false,//设置是否允许同时选中多个节点
- },check: {
- enable: true //设置ztree的节点是否显示checkBox/radio
- },data: {
- simpleData: {
- enable:true,//是否使用简单数据模式
- idKey: "id",//节点数据中保存唯一标识的属性名称
- pIdKey: "p_id",//节点数据中保存其父节点唯一标识的属性名称
- rootPId: "" //用于修正根节点父节点的数据,即pIdKey指定的属性值
- }
- },callback: {
- onClick:function (e,treeId,treeNode,clickFlag) { //用于捕捉勾选时触发
- zTree.checkNode(treeNode,!treeNode.checked,true);//勾选或取消勾选单个节点
- }
- }
- };
ajax
- var zNodes ;
- var select;
- var selectarry=[]; //要勾选的id
- var allnodes;
- var t = $("#tree");
- $.ajax({
- type: "POST",url: "...",//请求的后台地址
- data: "name=John&location=Bpston",//前台传给后台的参数
- dataType:"json",ansync:false,ContentType: "application/json; charset=utf-8",success: function(msg){ //msg:返回值
- // alert( msg.data );
- zNodes=msg.data.list;
- zNodes=eval(zNodes);
- //zNodes=JSON.stringify(zNodes);
- //console.log(zNodes);
- //alert(zNodes)
- t = $.fn.zTree.init(t,setting,zNodes);
- var zTree2 = $.fn.zTree.getZTreeObj("tree");
- selectarry=msg.data.nodes.split(",");
- allnodes=zTree2.getNodes();
- for(select=1;select<selectarry.length;select++)
- {
- allnodes[select]=msg.data.list[select];
- }
- console.log(allnodes);
- //console.log(selectarry);
- for(select=0;select<selectarry.length;select++)
- {
- zTree2.checkNode(zTree2.getNodesByParam("id",selectarry[select])[0],true);
- }
- }
- });
ps:
附展开、折叠、勾选、取消全部节点的方法
- //展开和折叠
- $("#ztreeExpandAll").click(function () {
- $.fn.zTree.getZTreeObj("tree").expandAll(true);
- });
- $("#ztreeUnExpandAll").click(function () {
- $.fn.zTree.getZTreeObj("tree").expandAll(false);
- });
- //勾选全部或取消全部
- var clicknumber=1;
- $("#checkall_deafult").click(function () {
- if(clicknumber%2>0) {
- // var treeObj = $.fn.zTree.getZTreeObj("tree");
- zTree.checkAllNodes(true);
- }
- else {
- // var treeObj = $.fn.zTree.getZTreeObj("tree");
- zTree.checkAllNodes(false);
- }
- clicknumber++;
- });