1. I found the example of line merging on the net, ExtJS wrote, I moved it to change the next, Fineui can also be used, is only to see, select and edit row extension column did not test, put out everyone look at the use of it.
<script> F.ready (function () {//method span parameter (grid instance, row number, column number, combined state, combined quantity) var span = Funct Ion (grid, row, col, type, num) {//This is a column-hiding mechanism that finds columns that hide the effect of merging will be misplaced var hiddens = [], columns = GRI D.columns; var B = true; Ext.Array.each (columns, function (column, index) {if (Column.ishidden ()) {///IF The column you want to hide hides the if (col = = index + 1) {//Merge cells do not take effect b = false; } } }); if (b) {switch (type) {//type, line case ' row ': GetNode Find the node row is to find the line, query, with jquery Search all lines of TD, you can see the grid actually use table to spell TDS = Ext.get (grid . View.getnode (Row)). Query (' TD '); Locate the column by column number, edit the attribute rowspan=num merge number Ext.Get (Tds[col]). Set ({rowspan:num}); Add the vertical center attribute, of course you can write Ext.get (Ext.get (Tds[col)). SetStyle ({' vertical-align ': ' Middle '}); Loop the covered cell, destroy throw away for (i = row + 1; i < row + num; i++) { Ext.get (Ext.get (Grid.view.getNode (i)). Query (' TD ') [COL]). Destroy (); } break; Case ' col '://merge columns, as in line, did not try to write their own TDS = Ext.get (Grid.view.lockedView. GetNode (Row)). Query (' TD '); Ext.get (Tds[col]). Set ({colspan:num}); Break } } }; To perform the merge method, note the parameter span (F (' <% =grid1.clientid%> '), 2, 2, ' Row ', 3); Merge rows are executed when columns are hidden and displayed, otherwise the F (' <% =grid1.clientid%> ') will be misplaced. On (' Columnhide ', function () {sPan (F (' <% =grid1.clientid%> '), 2, 2, ' Row ', 3); }); F (' <% =grid1.clientid%> '). On (' Columnshow ', function () {var Grid = F (' <% =grid1.clientid%> '); Span (grid, 2, 2, ' Row ', 3); }); }); </script>
Get this under the grid and see if you need to send an example.
2. Add a filter control on the column header, of course, you can add another
Query can be used, interested can write their own, or the method, in fact, referred to many times before, is added a property, and then No.
I added two properties, filter and FilterName to the source GridCloumn.cs, record what is displayed and turn on the display control
private bool _filter = false; <summary> ///Enable filter function ///</summary> [Category (categoryname.options)] [ DefaultValue (True)] [Description ("Enable filtering")] public virtual BOOL filter { get { Return _ _ filter; } Set { _filter = value; } } private string _filtername = ""; <summary> ///Filter column ///</summary> [Category (categoryname.options)] [ DefaultValue (True)] [Description ("Filter column")] public virtual string filtername { get { return _filtername; } Set { _filtername = value; } }
This one will understand, and then I'll use these two attributes,
<f:boundfield width= "100px" filter= "true" Filtername= ' Panelgrid1_textname ' columnid= "name" datafield= "name" Dataformatstring= "{0}" headertext= "name"/>
Note filtername parameters, CNC parts of the ClientID, this I would like to use the ASP, not successful, can only be handwritten. Panelgrid1_textname is a text control, and I've also written an event to edit the postback filter refresh table. Property Plus is the implementation, of course, the Onfirstprerender method, drawing events, plus this sentence can be, you can see is added a property items is which control, of course, is panelgrid1_textname. The last true is the original format output meaning, if you want to add more than one control this items should be a number of groups, this has not been tried. It's even a success. 3. Add a sidebar to the grid, now there is the bottom of the Bar,extjs called Bbar, in fact, there are Tbar and Rbar Lbar, add a rbar, you can refer to their add, feel no big use. or change the source, this change is Grid.cs file, first find Pageitems,pageitems is bbar that I write a pageritems, is to stick, change a name. The next step is to find the Onfirstprerender method, to Riga,
if (Pageritems.count > 0) {optionbuilder rbuilder = new Optionbuilder (); Rbuilder.addproperty ("DisplayInfo", true); Rbuilder.addproperty ("Store", Render_gridstoreid, True); Jsarraybuilder ab = new Jsarraybuilder (); foreach (Controlbase item in Pageritems) {if (item. Visible) {ab. AddProperty (String.Format ("{0}", item. XID), true); }}//cls: ' X-toolbar-paging ', Rbuilder.addproperty ("CLS", "' x-toolbar-paging X-docked-bottom x-toolbar-docked-bottom x-toolbar-docked-bottom ' ", true); Rbuilder.addproperty ("Items", AB. ToString (), true); Rbarscript = String.Format ("var {0}=ext.create (' Ext.ux.SimplePagingToolbar ', {1});", Render_rbarid, Rbuilder); Ob. AddProperty ("Rbar", Rbuilder, True); }
Here is the use of the array, you can study how to spell, and finally add to the Rbar, items are pageritems in the item. To the front desk if there is no problem can see Pageritems and Pageitems Horizontal can write events or something, he himself on the vertical row
Asp.net-fineui Development Practice-12