ztree通过ajax获取json并勾选checkbook

前端之家收集整理的这篇文章主要介绍了ztree通过ajax获取json并勾选checkbook前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

应上级要求,项目的树列表要用ztree,那就服从命令吧。

配置

  1. var zTree;
  2. var setting = {
  3. view: {
  4. dblClickExpand: false,//双击节点时,是否自动展开父节点的标识
  5. showLine: true,//设置ztree是否显示节点之间的连线
  6. selectedMulti: false,//设置是否允许同时选中多个节点
  7. },check: {
  8. enable: true //设置ztree的节点是否显示checkBox/radio
  9. },data: {
  10. simpleData: {
  11. enable:true,//是否使用简单数据模式
  12. idKey: "id",//节点数据中保存唯一标识的属性名称
  13. pIdKey: "p_id",//节点数据中保存其父节点唯一标识的属性名称
  14. rootPId: "" //用于修正根节点父节点的数据,即pIdKey指定的属性
  15. }
  16. },callback: {
  17. onClick:function (e,treeId,treeNode,clickFlag) { //用于捕捉勾选时触发
  18. zTree.checkNode(treeNode,!treeNode.checked,true);//勾选或取消勾选单个节点
  19. }
  20. }
  21. };

ajax

  1. var zNodes ;
  2. var select;
  3. var selectarry=[]; //要勾选的id
  4. var allnodes;
  5. var t = $("#tree");
  6. $.ajax({
  7. type: "POST",url: "...",//请求的后台地址
  8. data: "name=John&location=Bpston",//前台传给后台的参数
  9. dataType:"json",ansync:false,ContentType: "application/json; charset=utf-8",success: function(msg){ //msg:返回值
  10. // alert( msg.data );
  11. zNodes=msg.data.list;
  12. zNodes=eval(zNodes);
  13. //zNodes=JSON.stringify(zNodes);
  14. //console.log(zNodes);
  15. //alert(zNodes)
  16. t = $.fn.zTree.init(t,setting,zNodes);
  17. var zTree2 = $.fn.zTree.getZTreeObj("tree");
  18. selectarry=msg.data.nodes.split(",");
  19. allnodes=zTree2.getNodes();
  20. for(select=1;select<selectarry.length;select++)
  21. {
  22. allnodes[select]=msg.data.list[select];
  23. }
  24. console.log(allnodes);
  25. //console.log(selectarry);
  26. for(select=0;select<selectarry.length;select++)
  27. {
  28. zTree2.checkNode(zTree2.getNodesByParam("id",selectarry[select])[0],true);
  29. }
  30.  
  31. }
  32. });

ps:

附展开、折叠、勾选、取消全部节点的方法

  1. //展开和折叠
  2. $("#ztreeExpandAll").click(function () {
  3. $.fn.zTree.getZTreeObj("tree").expandAll(true);
  4. });
  5. $("#ztreeUnExpandAll").click(function () {
  6. $.fn.zTree.getZTreeObj("tree").expandAll(false);
  7. });
  8.  
  9. //勾选全部或取消全部
  10. var clicknumber=1;
  11.  
  12. $("#checkall_deafult").click(function () {
  13. if(clicknumber%2>0) {
  14. // var treeObj = $.fn.zTree.getZTreeObj("tree");
  15. zTree.checkAllNodes(true);
  16. }
  17. else {
  18. // var treeObj = $.fn.zTree.getZTreeObj("tree");
  19. zTree.checkAllNodes(false);
  20. }
  21. clicknumber++;
  22. });

猜你在找的Ajax相关文章