Two ways to load JSON data to a page form (improved the easyui built-in method)

Background projects often need to fill in JSON data into page forms. At first, I used the form load method that comes with easyui, and thought the efficiency was very low, data loading is often suspended (in actual projects, tables have more than to fields) and cannot process radio/checkbox. (The Idea Of easyui is to use combo to process them.) The problem of thinking can be transformed into: there are a bunch of JSON data, and there is a form, which may be one-to-one, to fill in the data in the form, there are generally two ways to pin the data, one by one select elements fill solution 2 select all elements first, what kind of better data filling is? Some people may probably think of a better solution for test and verification, but I still need to write some code to test and verify the effectiveness of my test example: results solution 2 is obviously better than solution 1. After checking the original code, we found that the form load solution provided by easyui is processed based on solution 1, the processing of some details is very slow. in fact, we have to deal with the radio/checkbox situation and some other details, so we finally sorted out the encapsulated Code as follows! Function ($) {$. fn. extend ({/* fill JSON data into the form, compatible with forms rendered by easyui * 20140203 reconstructed by p2227 * parameter: * relateTable: relational table, key-value object, that is to say, the other table * data: JSON data to be filled * callBack: callBack function after data is filled, generally, form verification is required after data is filled. ** usage: * $ ('form '). loadForm ({data: {key, value}); **/loadForm: function (conf) {conf = conf ||{}; conf. relateTable = conf. relateTable | {}; var rt = conf. relateTable; var formObj = this; var JsonData = conf. data; var newData ={}; function fill1EasyUI (dom, data1) {// fill in the value to an easyUI form object // visually test for combobox and datebox, we recommend that you call the form of easyUI. load Method var eDom = $ ("[comboName = '" + dom. name + "']", formObj); // find the dom element that easyUI uses (without name) if (eDom. length <= 0) return; var type = eDom [0]. className. match (/(\ w *?) -F/); // The first class with "any letter-f" in the dom class if (type & type. length> 0) {type = type [1]; if (/datebox/I. test (type) {data1 = flitDate (data1);} if (eDom [type] ("options "). multiple) {eDom [type] ("setValues", data1.replace (/\ s *, \ s */g ,","). split (",");} else {eDom [type] ("setValue", data1) ;}} else {if (eDom. next ("span. datebox "). length> 0) {// for IE7 IE6 eDom. datebox ("setValue", flitDate (data1) ;}}/* input: 00:00:00, 2012.2.2, 2012/4/7 * output: 2012-04-04 **/function flitDate (dStr) {if (dStr) {var dreg =/(\ d {4 }) ([-\/.]) (\ d {1, 2}) \ 2 (\ d {1, 2})/; var sval = dStr. match (dreg) [0]. replace (dreg, "$1-$3-$4"); return sval;} else {return dStr ;}} function fill1Simple (dom, data1) {if (dom = undefined) {return;} if (dom. className. match (/combo-value/I) {fill1EasyUI (dom, data1); // fill data according to the easyUI rules} else {var $ dom =$ (dom ); If ($ dom. is ("span. om-combo> input ") {$ dom. omCombo ('value', data1)} else {dom. value = data1; // normal html element value }}// Add the data on the webpage that requires additional control to the filled data $. each (rt, function (key, value) {if (jsonData [key]) {jsonData [value. replace (/\ */g, '')] = jsonData [key] ;}}); /* is the main function for data Filling Used To take the form as the main loop or is the data as the main loop fast ??? To be tested. * Test results: the form is the main loop, and EasyUI and general form items must be processed separately. ** radio and checkbox must be put in the same process, because you do not know whether the project in the table is text or radio **/var nameflag = ""; // if the data with the same name is found, set the tag, so that the loop runs only once $ ("input [name], textArea [name], select [name]", formObj ). each (function () {// in the actual project, the JSON data key is always capitalized and must be filled to the page. Fill the data with the fillBack attribute in the form, therefore, var filldata1 = jsonData [this. name] | jsonData [this. name. toUpperCase ()] | jsonData [this. getAttribute ("fillBack")]; if (jsonData [this. name] = 0 | jsonData [this. name. toUpperCase ()] = 0 | jsonData [this. getAttribute ("fillBack")] = 0) {filldata1 = 0 ;} if (filldata1 = undefined | filldata1 = "" | filldata1 = null | filldata1 = "null") {return ;} else {if (/radio/I. test (this. getAttribute ("type") {if (this. name = nameflag) {return;} nameflag = this. name; $ ("input [name = '" + nameflag + "'] [value =" + $. trim (filldata1) + "]"). prop ("checked", true);} else if (/checkbox/I. test (this. getAttribute ("type") {if (this. name = nameflag) {return;} nameflag = this. name; $ ("input [name = '" + nameflag + "']"). prop ("checked", false) // first clear the original data $. each (filldata1.split (','), function (k, v) {$ ("input [name = '" + nameflag + "'] [value = '" + $. trim (v) + "']"). prop ("checked", true) ;}} else {this. value = ""; // first clear the original data fill1Simple (this, filldata1) ;}}; if (typeof conf. callBack = "function") {conf. callBack (jsonData) ;}}) ;}( jQuery );