Modify the flexigrid source code of jQuery table plug-in to add custom functions (1)

Flexigrid is a lightweight jQuery table plug-in with a small size. The compressed JavaScript and css source code is less than 40 kb and is easy to use. However, simplicity usually means the lack of some advanced functions. Fortunately, its source code is relatively simple and easy to understand. The project homepage is: http: Flexigrid is a lightweight jQuery table plug-in with a small size. The compressed JavaScript and css source code is less than 40 kb and is easy to use. However, simplicity usually means the lack of some advanced functions. Fortunately, its source code is relatively simple and easy to understand. The project homepage is: http://www.flexigrid.info/ . I have made a few small Functional Extensions some time ago. Today I have sorted them out and shared them with the readers who need them: I have implemented HTML templates for table unit content and mouse-click events. The usage is to configure the column when the colModel of the grid is defined. [javascript] $ ('# userGrid') has been described in the comments of the following code '). flexigrid ({resizable: false, url: url, ype: 'json', method: 'get', singleSelect: true, colModel: [{display: 'username', name: 'username', width: 100, sortable: false, align: 'center'}, {display: 'test', name: 'test', width: 120, /* New Function example of NearEast flexigrid in defines an html display template. {$} is a variable that indicates the data value of the column passed in the background */html: 'New Function example: {$}',/* 2013-06-08 NearEast flexigrid new function example specifies the event processing function when you click the element in this column */handler: NearEast. printArgs}], buttons: [{name: 'add', bclass: 'add', onpress: func}], sew. EMS: [{display: 'username', name: 'username'}], sortname: "userName", sortorder: "asc", usepager: true, title: 'user list', useRp: true, rp: 15, width: 600, height: 200}); The implementation effect is similar to the Red Circle: view the code, find the addData function of table class g, for the data type is json, in the data filling section (defined The content of td. innerHTML is about 356th lines.) modify the source code. First, we define a variable var ph = p.colModel[idx].html | '{$}'. This variable represents the template used for data display. P is the Configuration Attribute object of the entire table, that is, the configuration items that we pass when calling the flexigrid method. Idx indicates the index of the column currently traversed, so p. colModel [idx] is the configuration of the column currently traversed. The defined ph variable first checks that the column configuration contains the html template configuration. If it is not defined, the default value is variable {$ }. Next, we need to obtain the data value of the corresponding Element Based on the Data Type passed in the background. In the scope, a row variable represents the data rows currently traversed, and row. cell is an array that corresponds to the cell items in the json data transmitted from the background. The cell item can be a json object of a "name-value" pair, such as cell: {newid: 0, author: 'neareast', url :' http://blog.csdn.net/neareast ', Address: 'beijing'}; can also be a simple array, such as cell: [0, 'neareast ',' http://blog.csdn.net/neareast /Article/details/12904393 ', 'haidian']. For the two formats of cell items, we determine: If cell is an array, the idx of the array is taken directly, that is, row. cell [idx]; if cell is a json object, use the name (p. colModel [idx]. name) is used as the key to obtain the json value. Finally, fill the template with the data value obtained in the previous step, and assign the value to the innerHTML of the table unit td. The template uses the native method replace of the javascript string to replace all the "{$}" variables in the ph variable with the expected data value. The final code is as follows: [javascript] // if the cell is an array if (typeof row. cell [idx]! = "Undefined") {td. innerHTML = ph. replace (/{\$}/g, (row. cell [idx]! = Null )? Row. cell [idx]: ''); // null-check for Opera-browser // if the cell is a json object} else {td. innerHTML = ph. replace (/{\$}/g, row. cell [p. colModel [idx]. name]);} for a regular expression, see the author's blog: http://blog.csdn.net/neareast /Article/details/6936460. At this point, the custom template function has been completed, but we have found a way to dynamically control the content of a table unit. We can not only change the style of a unit as we like, you can also easily add other custom functions, such as adding a Row Element double-click event or clicking event processing functions for all units in a column. For details, see the following.