Jquery flexigrid's Asp.net perfect solution-dotnetflexgrid User Guide (2) Server query, quick query, and HTML Template

1. Before getting started, check the latest v1.2 version.

• Fixed the conflict between the keyboard carriage return event and the control peripheral Event During Quick query.
• Fixed the syntax error that may occur when you set a Regular Expression During Quick query.
• Data Provision MethodDatahandlerIt is no longer required to be consistent with the Column Binding Order.DatatableInColumnnameAutomatically bound to the appropriate column, so please ensure that yourDatatableIt is the same as the column name in the control (case sensitive ).
• Added the template display function.InitconfigThe column configuration is added during initialization.ItemtemplateAttribute.
• Demo projectFirstgrid. aspxAdded client refresh, server refresh, and quick query functions.
• Demo projectTesttemplate. aspxA presentation template is provided.

  Most importantlyTemplateYou can customize the display content of each grid at will. For example, you can display text boxes, single-choice buttons, and images in a table. I believe many of you will be interested.

• Quick query, Server query, and template

We continue to start. This time, we improved our firstgrid and added the Server query results and saved queries for it.

 

In general,. netProgramThe staff is better at setting a data filtering condition on the interface, and then generating and displaying a data set in the background through PostBack. The previous chapter demonstrates how to query the client. Here, we are back to the tradition, use Server query to filter data.

The simplest is to add a textbox and a button to the page, as shown below:

<Asp: textbox id ="Textbox1"Runat ="Server"> </ASP: textbox> <asp: button id ="Button1"Runat ="Server"Text ="Server Query demonstration"Onclick ="Button#click"/>
 

We add an onclick event for the button.Button#click,Event ImprovementCodeAnd dotnetflexgrid:

//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /////////////////////

Protected VoidButton#click (ObjectSender,EventargsE)

{

Dotnetflexgrid1.defasearch search. Add ("String1", Textbox1.text );// Use the string1 field for query

}

Code added in dotnetflexgrid1datahandler:

// Process the default query, that is, the defaultsearch query parameter specified in button#click.

If(P. defaultsearch. containskey ("String1"))

{

System. Data.DataviewDV = result. Table. defaultview;

DV. rowfilter ="String1 like '%"+ P. defasearch search ["String1"] +"% '";

Result. Table = DV. totable ();

}

//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// ////////////////////

Why not execute the query operation in button#click? Let's review that our control is actually a fully asynchronous (Ajax) working method. In fact, we also hope that data updates can be minimized and the most lightweight; like the well-known ajaxpro, we did not instantiate the entire page at all during asynchronous requests. Instead, we only called the datahandler Method for Data Provision, avoiding the logic of a large number of model building methods in Asp.net form, only the table data needs to be returned. This leads to a problem. How to provide parameters for datahandler is solved through defaultsearch and extparam.

In this example, we provide a defasearch search named string1 when clicking the button, which detects this parameter in datahandler and executes the appropriate query. As before, we still use dataview for simulation, in practice, you need to perform data query operations based on your needs.

Okay. The server will refresh the page to reload data each time it queries, but this is not required for client queries.

 

In application scenarios, we usually provide a range of data filtering. You can use the above method to achieve this, sometimes, you can quickly locate or filter the data within the preceding filtering range. For example, you can filter data within the date range and then locate an address within the range.

Dotnetgrid provides the quick query function inherited from jquery flexigrid, as shown below:

In fact, it is very easy to find your initialization table againInitconfigThe code is changed to the following:

//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /////////////////////

This. Dotnetflexgrid1.initconfig (

New String[] {

"Selectedonclick = true",// Whether to click the row to automatically select the checkbox

"Usepager = true",// Use the page Splitter

"Showcheckbox = false",// Display the check box

"Height = 200",// Height, which can be auto or a specific PX Value

& Quot; width = 600 & quot"// Width, which can be auto or a specific PX Value

},

New Dotnetflexgrid.Fieldconfig[] {

New Dotnetflexgrid.Fieldconfig("Guid","No", 60,True,Dotnetflexgrid.Fieldconfigalign. Left ),

New Dotnetflexgrid.Fieldconfig("String1","User Name", 180,True,Dotnetflexgrid.Fieldconfigalign. Right ),

New Dotnetflexgrid.Fieldconfig("String2","Address", 180,True,Dotnetflexgrid.Fieldconfigalign. Left ),

New Dotnetflexgrid.Fieldconfig("String3","Creation Time", 60,True,Dotnetflexgrid.Fieldconfigalign. Left)

},

New Dotnetflexgrid.Serchparamconfig[] {

New Dotnetflexgrid.Serchparamconfig("User Name","String1",True,Dotnetflexgrid.Serchparamconfigoperater. EQ,Null),// Perform equality query through string1 without binding a regular expression

New Dotnetflexgrid.Serchparamconfig("Address","String2",False,Dotnetflexgrid.Serchparamconfigoperater. Like,@ "^ [\ D] + $")// Use string2 for approximate query. Numbers are required for binding.

},

Null

);

//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// ////////////////////

InInitconfig uses the third parameterSerchparam,The "User Name" is specified, the equivalent query of the bound field string1 and the display name "Address" are specified, and the approximate query of the bound field is string2. At the same time, the query constraint for an address is that only numbers can be entered.

When you browse the page again, the query panel is displayed correctly. Enter the data and press Enter. The table shows the refresh animation, but there is no data change.

It's easy. We also provide the data method datahandler to increase the processing of quick queries.

//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /////////////////////

Code added in dotnetflexgrid1datahandler:

// If the passed parameter contains the saved search parameter, perform the Saved Search

If(P. qop! =Dotnetflexgrid.Serchparamconfigoperater. None & P. qtype. length> 0 & P. query. length> 0)

{

System. Data.DataviewDV = result. Table. defaultview;

If(P. qop =Dotnetflexgrid.Serchparamconfigoperater. Like)

DV. rowfilter = P. qtype +"Like '%"+ P. query +"% '";

Else

DV. rowfilter = P. qtype +"= '"+ P. query +"'";

Result. Table = DV. totable ();

}

//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// ////////////////////

Now it is normal. The data we expect is displayed after the query. HereP. qop provides the fast query operator (equal to or equal to), P. qtype provides the query field, that is, the bound field during initialization, P. query provides conditions for user input.

 

Finally, firstgrid. in the example of aspx, The New Feature Template of version 1.2 is added. In the address column, we will display a clickable link to access Google for query, and then add a column of images to display the cnblogs logo.

It is also very easy to find the code to initialize the table, add an image column and add template settings.

//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /////////////////////

This. Dotnetflexgrid1.initconfig (

New String[] {

"Selectedonclick = true",// Whether to click the row to automatically select the checkbox

"Usepager = true",// Use the page Splitter

"Showcheckbox = false",// Display the check box

"Height = 200",// Height, which can be auto or a specific PX Value

& Quot; width = 600 & quot"// Width, which can be auto or a specific PX Value

},

New Dotnetflexgrid.Fieldconfig[] {

New Dotnetflexgrid.Fieldconfig("Guid","No", 60,True,Dotnetflexgrid.Fieldconfigalign. Left ),

New Dotnetflexgrid.Fieldconfig("String1","User Name", 180,True,Dotnetflexgrid.Fieldconfigalign. Right ),

New dotnetflexgrid . fieldconfig ( "string2" , "Address" , 180, true , dotnetflexgrid . fieldc Onfigalign . left, false , false , true , " address for accessing [@ string1] "),

New dotnetflexgrid . fieldconfig ( "string3" , "Creation Time" , 60, true , dotnetflexgrid . fieldconfigalign . left),

New Dotnetflexgrid.Fieldconfig("Datetime","Photo", 60,True,Dotnetflexgrid.Fieldconfigalign. Left,False,False,True,")

},

New Dotnetflexgrid.Serchparamconfig[] {

New dotnetflexgrid . serchparamconfig ( "User Name" , "string1" , true , dotnetflexgrid . serchparamconfigoperater . EQ, null ), // perform equality query through string1, do not bind a regular expression

New Dotnetflexgrid.Serchparamconfig("Address","String2",False,Dotnetflexgrid.Serchparamconfigoperater. Like,@ "^ [\ D] + $")// Use string2 for approximate query. Numbers are required for binding.

},

Null

);

This. Dotnetflexgrid1.datahandler =New Dotnetflexgrid.Datahandlerdelegate(Dotnetflexgrid1datahandler );// Method for providing data//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// ////////////////////

When initconfig is initialized, an itemtemplate attribute is added to the column configuration. This attribute provides the display template setting at the beginning. You can provide almost any HTML content in this attribute (of course, make sure that the table structure is not damaged. Use the simple template syntax "[@ field name]" to display the expected format, for example:

"<Input id = '[@ guid] 'Type = 'text' value =' [@ string1] '/>"

The preceding syntax displays the ID text box in the specified column, which displays the value of the string1 field.

This firstgrid. aspx is here, the latest dotnetflexgrid 1.2 please visit http://dotnetflexgrid.codeplex.com/download, also please visit my blog " http://www.cnblogs.com/hualei " provides some valuable suggestions.