日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

zTree復(fù)選框案例 封裝版

 一本正經(jīng)地胡鬧 2019-05-23

一.配置樹參數(shù)

  1. //1.獲取setting值
  2. function getSetting(){
  3. var setting = {
  4. view: {
  5. dblClickExpand: true,
  6. selectedMulti : true,//可以多選
  7. showLine: true
  8. },
  9. check: {
  10. enable: true ,//顯示復(fù)選框
  11. chkStyle : "checkbox"
  12. },
  13. data: {
  14. key: {
  15. title:"t"
  16. },
  17. simpleData: {
  18. enable: true,
  19. idKey: "id",
  20. pIdKey: "pId",
  21. rootPId: null
  22. }
  23. },
  24. callback: {
  25. onCheck: onCheck
  26. }
  27. };
  28. return setting;
  29. }

二.初始化樹(創(chuàng)建樹)

  1. //2.創(chuàng)建樹
  2. function createTree(treeId,dL,dLSize){
  3. //獲取樹參數(shù)默認值
  4. var setting=getSetting();
  5. var zNodes=new Array();
  6. //設(shè)置根節(jié)點數(shù)據(jù)
  7. zNodes[0]={ id:'##',
  8. pId:"-1", name:'物資類別', t:'物資類別',open:true};
  9. for(var i=0;i<dLSize;i++){//設(shè)置子節(jié)點數(shù)據(jù)
  10. zNodes[i+1]={
  11. id:dL[i].classCode,
  12. pId:dL[i].parentCode,
  13. name:dL[i].className+"("+dL[i].classCode+")",
  14. classId:dL[i].classId,
  15. t:dL[i].className};
  16. }
  17. //1)創(chuàng)建zTree樹
  18. $.fn.zTree.init($(treeId), setting, zNodes);
  19. //2)初始化已經(jīng)被選中的物資類別
  20. checkMaterial();
  21. }

三.選中一開始被選中的(初始化一開始就選了的內(nèi)容)

  1. //3.初始化被選中的物資類別
  2. function checkMaterial(){
  3. var classCodes = $("#classCodes").val();//物資編碼
  4. var datalist = classCodes.split(",");//將物資編碼打散成數(shù)組
  5. //獲取所有樹節(jié)點
  6. var treeObj = $.fn.zTree.getZTreeObj("materialTree");
  7. if(datalist!='' &&datalist.length>0){
  8. var nodes=treeObj.getNodes();//獲取所有子節(jié)點
  9. for(var i=0;i<datalist.length;i++){
  10. //通過id查找節(jié)點
  11. var node =
  12. treeObj.getNodeByParam("classId",datalist[i],null);
  13. //選中該節(jié)點
  14. if(node!=null){//先判斷節(jié)點是否為空
  15. //選中該節(jié)點
  16. treeObj.checkNode(node,true,true);
  17. //獲取該節(jié)點父節(jié)點
  18. var parent = node.getParentNode();
  19. if(!parent.open){//如果父節(jié)點沒有展開則展開父節(jié)點
  20. treeObj.expandNode(parent,true,true);
  21. }
  22. }
  23. }
  24. }
  25. }

 

四.樹的回調(diào)事件(保存選擇的復(fù)選框內(nèi)容)

  1. //4.樹的點擊事件回調(diào)函數(shù)
  2. function onCheck(event, treeId, treeNode){
  3. var classCodes = $("#classCodes").val();//物資編碼
  4. var classNames = $("#classNames").val();//物資名字
  5. //alert("onCheck");
  6. //獲取所有樹節(jié)點
  7. var treeObj = $.fn.zTree.getZTreeObj("materialTree");
  8. if(treeNode.checked){//如果是選中節(jié)點
  9. if(treeNode.isParent){//如果選中的是父節(jié)點(有子節(jié)點的節(jié)點)
  10. //獲取選中的父節(jié)點的所有子節(jié)點
  11. var childrenNodes = treeNode.children;
  12. for (var i = 0; i < childrenNodes.length; i++) {
  13. classCodes+=","+childrenNodes[i].classId;
  14. classNames+=","+childrenNodes[i].name;
  15. }
  16. }else{//如果是子節(jié)點(無子節(jié)點的節(jié)點)
  17. classCodes += ","+treeNode.classId;
  18. classNames += ","+treeNode.name;
  19. }
  20. }else{//如果是取消選中
  21. if(treeNode.isParent){//如果取消的是父節(jié)點(有子節(jié)點的節(jié)點)
  22. //獲取消的父節(jié)點的所有子節(jié)點
  23. var childrenNodes = treeNode.children;
  24. for (var i = 0; i < childrenNodes.length; i++) {
  25. var classCode=","+childrenNodes[i].classId;
  26. var className=","+childrenNodes[i].name;
  27. //刪除取消的節(jié)點對應(yīng)的數(shù)據(jù)
  28. classCodes=classCodes.replace(classCode, "");
  29. classNames=classNames.replace(className, "");
  30. }
  31. }else{//如果是子節(jié)點(無子節(jié)點的節(jié)點)
  32. classCode = ","+treeNode.classId;
  33. className = ","+treeNode.name;
  34. //刪除取消的節(jié)點對應(yīng)的數(shù)據(jù)
  35. classCodes=classCodes.replace(classCode, "");
  36. classNames=classNames.replace(className, "");
  37. }
  38. }
  39. //保存選中的值(物資類別編碼、物資類別名字)
  40. $("#classCodes").val(classCodes);
  41. $("#classNames").val(classNames);
  42. }

五.保存所選內(nèi)容

  1. //5.保存所選物資類別
  2. function saveMaterial(inputName){
  3. //獲取父頁要修改input元素
  4. var $input=parent.$("input[name="+inputName+"]");
  5. //獲取選中的物資類別名稱
  6. var className=$("#classNames").val();
  7. var classCode=$("#classCodes").val();
  8. //截取掉多余的“,”
  9. var classNames=className.substring(1,className.length+1);
  10. //截取掉多余的“,”
  11. var classCodes=classCode.substring(1,classCode.length+1);
  12. //修改所選的物資類別名字
  13. $input.val(classNames);
  14. //修改所選的物資類別編碼
  15. $input.attr("classCodes",classCodes);
  16. $input.next().val(classCodes);
  17. //關(guān)閉彈窗
  18. parent.layer.closeAll();
  19. }

六.關(guān)閉彈窗

  1. //6.關(guān)閉彈窗
  2. function closeMaterial(){
  3. parent.layer.closeAll();
  4. }

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多