把JSON数据载入到页面表单的两种思路（对easyui自带方法进行改进）

2022-01-02 03:32:53

把JSON数据载入到页面表单的两种思路（对easyui自带方法进行改进）

背景

项目中经常需要把JSON数据填充到页面表单，一开始我使用easyui自带的form load方法，觉得效率很低，经常在载入数据的时候有假死现象（实际项目中的表单一般都100-200个字段以上），而且不能处理radio/checkbox的情况。（easyui的思路是把它们都用combo去处理）

思路

问题可以转化为，现在有一堆JSON数据，有一个表单，可能是一一对应的，要把这个数据填写到表单上，一般说来有两种思路

  1. 方案一针对数据，一个个选择元素进行填充
  2. 方案二先选择所有的元素，再针对数据进行填充

到底哪种比较优呢？

测试验证

可能也有人大概想到较优方案，但是对于实事求是的我，还是要写些代码去测试验证

我的测试例子

效果截图:

把JSON数据载入到页面表单的两种思路（对easyui自带方法进行改进）

结果

方案二的思路明显要比方案一的优，而且查看原代码后发现，easyui自带的form load方案是以方案一为基准去处理的，再加上一些细节的处理，效率非常的慢.

改进

实际上我们还要处理radio/checkbox的情况，以及处理其他一些细节，故最后整理封装的代码如下

    

  1. !function($){
    2. 

  2.     $.fn.extend({
    3. 

  3.         /*
    4. 

  4.           把JSON数据填充进表单，兼容easyui渲染过的表单
    5. 

  5.         * 20140203 reconstructed by p2227
    6. 

  6.         * 参数：
    7. 

  7.         * relateTable:关系表，key-value对象，即JSON数据与表单有不对应时的另外对照表
    8. 

  8.         * data:要填充的JSON数据
    9. 

  9.         * callBack:填充完数据后的回调函数，一般说来填充完数据要进行表单验证
    10. 

  10.         *
    11. 

  11.         * 用法：
    12. 

  12.         * $(‘form‘).loadForm({data:{key,value}});
    13. 

  13.         * */
    14. 

  14.         loadForm:function(conf){
    15. 

  15.             conf = conf || {};
    16. 

  16.             conf.relateTable = conf.relateTable || {};
    17. 

    18. 

  18.             var rt = conf.relateTable;
    19. 

  19.             var formObj = this;
    20. 

  20.             var jsonData = conf.data;
    21. 

  21.             var newData = {};
    22. 

  22.             function fill1EasyUI(dom,data1){ //填充值到一个easyUI表单对象上
    23. 

  23.                 //目测针对combobox和datebox，其他表单对象 建议调用 easyUI本身的 form.load方法
    24. 

  24.                 var eDom = $("[comboName=‘" + dom.name + "‘]",formObj); //找到easyUI起作用的dom元素（不带name）
    25. 

  25.                 if(eDom.length<=0) return;
    26. 

    27. 

  27.                 var type = eDom[0].className.match(/(\w*?)-f/); //该dom的类上第一个带 "任意字母-f"的类
    28. 

  28.                 if(type && type.length>0){
    29. 

  29.                     type = type[1];
    30. 

  30.                     if(/datebox/i.test(type)){
    31. 

  31.                         data1 = flitDate(data1);
    32. 

  32.                     }
    33. 

  33.                     if (eDom[type]("options").multiple){
    34. 

  34.                         eDom[type]("setValues", data1.replace(/\s*,\s*/g,",").split(","));
    35. 

  35.                     } else {
    36. 

  36.                         eDom[type]("setValue", data1);
    37. 

  37.                     }
    38. 

  38.                 }else{
    39. 

  39.                     if(eDom.next("span.datebox").length>0){ //for IE7 IE6
    40. 

  40.                         eDom.datebox("setValue", flitDate(data1));
    41. 

  41.                     }
    42. 

  42.                 }
    43. 

  43.             }
    44. 

    45. 

  45.             /* 输入：2012-04-04 00:00:00,2012.2.2,2012/4/7
    46. 

  46.              * 输出：2012-04-04
    47. 

  47.              * */
    48. 

  48.             function flitDate(dStr){
    49. 

  49.                 if(dStr){
    50. 

  50.                     var dreg = /(\d{4})([-\/.])(\d{1,2})\2(\d{1,2})/;
    51. 

  51.                     var sval = dStr.match(dreg)[0].replace(dreg,"$1-$3-$4");
    52. 

  52.                     return sval;
    53. 

  53.                 }else{
    54. 

  54.                     return dStr;
    55. 

  55.                 }
    56. 

  56.             }
    57. 

    58. 

  58.             function fill1Simple(dom,data1){
    59. 

  59.                 if(dom == undefined){ return;}
    60. 

    61. 

  61.                 if(dom.className.match(/combo-value/i)){
    62. 

  62.                     fill1EasyUI(dom,data1); //按照easyUI的法则填充数据
    63. 

  63.                 }else{
    64. 

  64.                     var $dom = $(dom);
    65. 

  65.                     if($dom.is("span.om-combo>input")){
    66. 

  66.                         $dom.omCombo(‘value‘,data1)
    67. 

  67.                     }else{
    68. 

  68.                         dom.value = data1; //普通的html元素赋值
    69. 

  69.                     }
    70. 

  70.                 }
    71. 

  71.             }
    72. 

    73. 

  73.             //把网页上需要额外对照的数据也加到填充数据中
    74. 

  74.             $.each(rt,function(key,value){
    75. 

  75.                 if(jsonData[key]){
    76. 

  76.                     jsonData[value.replace(/\\*/g,‘‘)]=jsonData[key];
    77. 

  77.                 }
    78. 

  78.             });
    79. 

    80. 

  80.             /* 填充数据的主函数
    81. 

  81.              *
    82. 

  82.              * 是用表单为主循环还是数据为主循环快？？？要做测试。
    83. 

  83.              * 测试结果：以表单为主循环，必需将EasyUI和一般表单项分开处理
    84. 

  84.              *
    85. 

  85.              * 必须要把radio,checkbox放在同一起处理，因为你也不清楚对照表里面的项目是text还是radio
    86. 

  86.              * */
    87. 

  87.             var nameflag="";//name标记  如果找到有name相同的 data，那就设置标记，以便循环只运行一次
    88. 

  88.             $("input[name],textArea[name],select[name]",formObj).each(function(){
    89. 

  89.                 //在实际项目中，有这样的需要：JSON数据key总是大写，也要填充到页面；按表单中属性为fillBack的去填充，故在此进行扩充
    90. 

  90.                 var filldata1 = jsonData[this.name] || jsonData[this.name.toUpperCase()] || jsonData[this.getAttribute("fillBack")];
    91. 

  91.                 if(jsonData[this.name] === 0 || jsonData[this.name.toUpperCase()] === 0 || jsonData[this.getAttribute("fillBack")] === 0){
    92. 

  92.                     filldata1 = 0;
    93. 

  93.                 }
    94. 

  94.                 if(filldata1 === undefined || filldata1 === "" || filldata1 === null|| filldata1 === "null"){
    95. 

  95.                     return;
    96. 

  96.                 }else{
    97. 

  97.                     if(/radio/i.test(this.getAttribute("type"))){
    98. 

  98.                         if(this.name==nameflag){ return; }
    99. 

  99.                         nameflag = this.name;
    100. 

  100.                         $("input[name=‘"+ nameflag +"‘][value=" + $.trim(filldata1) + "]").prop("checked",true);
    101. 

  101.                     }else if(/checkbox/i.test(this.getAttribute("type"))){
    102. 

  102.                         if(this.name==nameflag){ return; }
    103. 

  103.                         nameflag = this.name;
    104. 

    105. 

  105.                         $("input[name=‘"+ nameflag +"‘]").prop("checked",false)//首先要清空原有数据
    106. 

  106.                         $.each(filldata1.split(‘,‘),function(k,v){
    107. 

  107.                             $("input[name=‘"+ nameflag +"‘][value=‘" + $.trim(v) + "‘]").prop("checked",true);
    108. 

  108.                         })
    109. 

  109.                     }else{
    110. 

  110.                         this.value = "";//首先要清空原有数据
    111. 

  111.                         fill1Simple(this,filldata1);
    112. 

  112.                     }
    113. 

  113.                 }
    114. 

  114.             });
    115. 

    116. 

  116.             if(typeof conf.callBack == "function"){
    117. 

  117.                 conf.callBack(jsonData);
    118. 

  118.             }
    119. 

  119.         }
    120. 

  120.     });
    121. 

  121. }(jQuery);
    122.

把JSON数据载入到页面表单的两种思路（对easyui自带方法进行改进）

上一篇：php调用osflv播放器


下一篇：jQuery 如何创建基本插件（翻译）