jquery form of lazy loading tree GridTree version (including demo project, source)

The previous table shows the tree

Form tree development experience

(1) on the lazy loading: that is the first time shows the time table tree display only part of the first layer nodes, and then when clicking on the icon containing the child node, the dynamics of child nodes to the background check, thus avoiding an increase contains all of the nodes, the speed is greatly improved. Lazy loading mode, can not use the "Expand", "Collapse", which all started on the grounds that all the nodes is equal to one-time load, and efficiency problems still not resolved! Used form of dynamically loaded ext students should have the concept of lazy loading, lazy loading, but the form does not limit ext "Expand" method, the efficiency is very low, my design to make such a deal.

(2) added three important callback method:
onLazyLoadSuccess: after completing the implementation of lazy loading can be processed.
onSuccess: load complete tree form can be processed, similar to the callback function.
onPagingSuccess: flip the tree form is finished, can be processed.
If you are not satisfied with the default form processing, you can re-do here in the way the things you love, including a custom selection mode and so on. Lazy loading mode, "select mode" has done a simplified, no 5 choices, you have to realize personalized selection mode will need to define in onLazyLoadSuccess approach!

1. Here is a simple configuration using the background data

var content = (
columnModel: [(
header: 'Code'
headerIndex: 'districtId',
width: '100px '
), (
header: 'Domain Name',
headerIndex: 'districtName',
width: '100px '
), (
header: 'parent node',
headerIndex: 'districtParent'
dataUrl: APP_PATH + '/ district.do? method = getGridTree',
idColumn: 'districtId',
parentColumn: 'districtParent',
tableId: 'testTable',
el: 'newtableTree'

(1) columnModel: that out of the column to display the description.
header: header of the column of the display (must write)
headerIndex: form the columns of data from which specific data description. (must write)
(2) dataUrl: Background requested address (3) idColumn: marked to be the only confirmation of the marking out of the column names (in the analysis of the results should be used in tree attributes, their corresponding data values may not overlap)
(4) parentColumn: indicate that the parent id column of column names (5) tableId: the formation of the form id
(6) el: table rendering object tree, which is in the body in the form to be used to display the tree of div's id
After configuring the above parameters, then the implementation of loadData (parameters) and makeTable () method can be the most simple form trees.

2. Add the table columns show the diversity of the sample as follows:
ColumnModel in the configuration file attributes using the following settings:
columnModel: [
(Header: 'unique identifier', headerIndex: 'disId'),
(Header: 'Domain Name', headerIndex: 'disName'),
(Header: 'parent node', headerIndex: 'disParent',
columntype: (inputtype: 'html', nameId: 'testHtml', htmlStr: '<font color="red"> $ </ font >'}},
(Header: 'test radio', headerIndex: 'rd', width: '300px ',
columntype: (inputtype: 'radiobox', style: 'testradio', values: ['1 ', '2'], texts: ['M', 'female'], nameId: 'sexRd')),
(Header: 'Test drop-down menu', headerIndex: 'radi',
columntype: (inputtype: 'select', style: 'testselect', values: ['1 ', '2'], texts: ['M', 'female'], nameId: 'sexSel')),
(Header: 'test multiple choice', headerIndex: 'multi', width: '10% ',
columntype: (inputtype: 'checkbox', style: 'testmulti', values: ['1 ', '2', '3 ', '4'], texts: ['on', 'next', 'left', 'Right'],
nameId: 'fangxiang', disabledIndex: 'rddisbled', isibledIndex: 'rdvisabled'}}],
Configuration instructions:
columntype: column type Description
inputtype: that the type of the column to be used, now being supported: 'radiobox', 'select', 'checkbox', 'textbox', 'html'.
style (when inputType effect from time to time does not mean html): style shows, for the introduction of the style form controls
values (when inputType = radiobox, select, checkbox when the role): The actual value of the form is a js array
texts (when inputType = radiobox, select, checkbox when the role): the value of the form shown is a js array
nameId: form attribute name prefix. The actual name attribute is the line where the value + id.
htmlStr (when inputType = html effect from time to time): Customize a html string. headerIndex which point the $ will be replaced by the value.
disabledIndex: 'disabledColumn', controls whether to disable a form element attribute values in the json data in a column existing in the name of the corresponding value of 1 if disabled, or available
visibledIndex: 'visibleColumn', control whether the visible form element an attribute value in the json data in a column name exists, if the corresponding value of 1 or not set this value, we can see, or not visible
onclick: function () (alert (1);), if the type is checkbox or radiobox, add the onclick method to define the interface.

3. Form the tree other configuration instructions
(7) debug: true, / / show the emergence of a load information table tree div box (8) handleCheck: function (){},// definition of the event click on Select button. Is onclick event handling, you can not write.
(9) disabled: true, if it is true that form the tree button, checkbox and other disabled. The default is false.
(10) disableOptionColumn: 'rddisbled', / / specify the options used to identify the properties box is disabled, the default is not (11) hidddenProperties: ['multi', 'disName'],// indicated that his party would also like to add some hidden the column value, not shown, but to put line. attention to set the property's value is an array type. you can not set this property. use this attribute, it can be used directly obj.multi line objects get the value, more convenient.
(12) chooesdOptionColumn: 'rddisbled', / / default options used to identify the properties of multi-box, select the button in case more time to be useful.
(13) handler: [("onclick", function (row) (alert (row.id );}},
("Ondblclick": function () (alert (1 );}}],
For each row of the table tree add custom event handlers. Because the tree form of each line is tr, td support the definition of an event can be configured in this property. Note whose value is a array. If Bu configuration of the property, there will be the default implementation.

4. Lazy loading tree configuration instructions (14) lazy: true, said to be lazy loaded tree, then you must set the following two properties:
(15) lazyLoadUrl: click on the background of non-leaf node is called the request address, the value of a parameter passed to the background 'pId'
(16) leafColumn: Set whether the leaf node of the property that, if the corresponding data is '1 'is the father node is marked for the '0' that is a leaf node to node without children. (Seems backwards, but my code has done has changed a lot, do not want changed. If we do not like the source code directly to change it!)

5. Callback function configuration instructions
(17) onPagingSuccess: display table at the next page, the last step in the implementation of this callback function, you can do any want to do, including hiding a column, so long as familiar with the js are ok!
(18) onLazyLoadSuccess: father node in Click to add child nodes, the last step in the implementation of this callback method, whatever you do!
(19) onSuccess: after the initial load the form, what would you want to do it.

6. Some other configuration parameters, do not understand a look here:
(20) pageBar: true; said to show the page column, that is, the effect appears paging (21) pageSize: 10; that page shows the number of first-level nodes (if not set, the default is 3 per page)
(22) rowCount: true; default is not of this column (23) countColumnDesc: 'sequence'; from the column added to the first name (if you do not set the default is 'sequence')
(24) checkOption: 1; can choose 1 or 2, if 1 is the radio button, 2 is more selection buttons, and other options will not be out there.
(25) checkColumnDesc: 'Please select'; select column heading name (if not set, the default is 'select')
(26) openImg: can open the icon file.
(27) closeImg: contraction node icon file.
(28) blankImg: leaf node in front of the icon file (29) expandAll: true, the form automatically start when the tree shows all of the children nodes.
(30) lazyLoadImg: lazy loading in the waiting period, the plus icon quietly into this picture!

7. Can not control the number of attributes (31) analyzeAtServer: as true or false, the background of the json data is not the same! If you are lazy loading, then the default the parameter is false.
(32) styleOption: two alternative values for the 1,2, change the look of the watch will also find a line, an ugly for that.
(33) showMenu, contextMenu: before to achieve the message to add, delete nodes, are not achieved.

<br /> On the code-behind form lazy loading tree, actually there are two ways to deal with java and a corresponding request is dataUtl, one lazyLoadUrl the request. The former query list is the first layer of the node to show a collection, but also to indicate whether a leaf node with the attribute value! The latter is the query node id corresponding to the incoming direct child nodes (not including the grandchildren nodes!) Project background details, refer to the sample code!

分类:Web 时间:2010-04-03 人气:440
blog comments powered by Disqus


iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.562 (s). 14 q(s)