SNF Rapid Development Platform mvc-advanced query components

1. Advanced Query

When we do the project often want to search by name, number of data, can be used in the development of the most common query conditions written, not commonly used to write, but also because all the fields are written too much, the layout is not good to see and not practical. There are also some query conditions hundreds of years to use, and can not be used to adjust the program. Based on these considerations we do a high-level query component, you can use all the columns as query criteria, the most common query conditions are also normal on the page. Click the Advanced Query button, there will be a column as a filter to facilitate the search, do not if the conditions are more can be saved as a query scheme, the next time you can easily query again.

1.1. Effect Display

Figure 2.1

Advanced Query Page

Figure 2.2

Advanced Query Management page

Figure 2.3

1.2. Call Description 1.2.1. Add a public JS reference to an advanced query

<script src= "~/content/js/core/common.advanced_query.js" ></script>

1.2.2. Defining Query Events

After you define the Table object for the query, define the query events. The self.grid below is the binding object for the DataGrid.

This.executequeryclick = function (POST) {

Self.grid.queryParams ($.extend (Ko.tojs (Self.queryform), post));

}

1.2.3. Binding advanced queries to tables

You can bind advanced queries in the way below, and you can automatically generate quick query bars and advanced queries, empty buttons

Through the method of spelling HTML, put the selected grid into a layout center, add a north, inside to render the Quick query scheme and the program configuration button

_param = {

Gridname: ID value of "grid"//datagrid

Grid:self.grid//DataGrid binding object that requires advanced queries

_url: "/demo/demosingletableadvancedquery/demosingletableadvancedquery"//Current page path

SearchFunc:self.executeQueryClick//corresponding to the This.executequeryclick method in the ViewModel

Flagsession:false//true indicates that the query column is automatically generated from the page reading of the DataGrid's Editor property, False indicates that the query column is filled in manually

Flagcollapsed:true//true load when query bar expands, false means dead, default True

Gridviewname: "Grid"//Use the database Gridviewname stored in the value of GRIDVIEWNAME data for advanced query, to facilitate the processing of existing data, as well as with the CS program interoperability. Default equals gridname, such as assigning a value to this value, note to modify query column binding values in the controller at the same time

//}

Snf.advancedquerylayout ({

Gridname: "Grid",

Grid:self.grid,

_url: "/demo/demosingletableadvancedquery/demosingletableadvancedquery",

SearchFunc:self.executeQueryClick,

Flagsession:false,

Flagcollapsed:true

Gridviewname: "Grid"

});

This method should be called after defining Self.grid!

1.2.4. If you don't need a quick query bar

In this way, you can add an advanced query button individually, first define a button, label Add Property data-bind= "Click:advancedqueryclick"

This.advancedqueryclick=function () {

Only need advanced query button, do not need quick query bar, call this method, the parameters are as follows, each parameter meaning can refer to 2.2.3

Snf. Advancedquerybuttonclick ({

Gridname: "Grid",

Grid:self.grid,

_url: "/demo/demosingletableadvancedquery/demosingletableadvancedquery",

SearchFunc:self.executeQueryClick,

Flagsession:true,

Gridviewname: "Grid"

});

}

1.2.5. Adding advanced query criteria

Flagsession=true, the advanced query condition is read directly from the editor, and if flagsession=false, the query condition is manually added to the controller, the code is as follows

#region to get the control type for advanced queries

[Mvcmenufilter (False)]

Public dynamic Getadvancedquerycolumns (Requestwrapper request)

{

var list = new list<keyvaluepair<string, object>> ();

List. ADD (New keyvaluepair<string, object> ("grid", new object[]{

New string[]{"Demosingletable.code", "number", "Validatebox"},

New object[]{"Dropdownsingle", "Data Dictionary", "ComboBox", this. Getitemslistcategorybs ("Itemsgender", "ItemCode", "ItemName")},

New object[]{"A", "a", "Combotree", SNFService.Instance.BaseItemDetailsService.GetDataTable (this. UserInfo, "Itemstreetest")},

New string[]{"Num", "Quantity", "Numberbox", "Min:0,precision:2"},

New string[]{"Money", "Amount", "Numberspinner", "Min:0,precision:2"},

New string[]{"Ischeckbox", "check box", "checkbox"},

New string[]{"Datebox", "date", "DateRange"},

New string[]{"Approvestate", "state", "lookup", "Lookuptype: ' Itemsauditstatus '"}

}));

Return list. Find (s = = S.key = = request["Gridviewname"]). Value;

}

#endregion

This method should be written under the inheritance class of Baseapicontroller

where the parameters

Lists are a list that can contain multiple key-value pairs, each of which corresponds to a table control.

Each key-value pair is an advanced query binding that represents a table, key-value pair is the ID value of the table that binds the advanced query, and the value of the key-value pair is an object that contains the query criteria that are required for all of the advanced queries in the corresponding table. This method automatically matches the table ID to return the list of query criteria that are required for the current table advanced query. Each returned query condition object can contain three to four elements, depending on the actual situation, and the main control types are distinguished from one another.

Note: JS in the Advancedqueryclick method parameter Gridname and the above method list key value "grid" and request["Gridviewname"] to be consistent.

First element: column name. The field in the corresponding database, the table name can be entered when querying multiple tables. column names, such as Demosingletable.code

Second element: Query criteria Chinese name, such as: number

Third element: control type, now supports Validatebox (text box), ComboBox (dropdown),

Numberbox (number box), Numberspinner (digital Spinner), checkbox (check box), DateRange (date range), lookup (marquee control), Combotree (drop-down tree)

The fourth element: The extended attribute, for ComboBox, Combotree, the fourth value of the data source to be displayed; for Numberbox,numberspinner,lookup, The fourth element is written between the Easyui control data-options inside the content that needs to be filled out (can refer to the easyui1.3.2 API); Validatebox,daterange,checkbox does not need a fourth element

1.2.6. Query method in controller Add method of stitching query condition

Snfservice.instance.createservice<baseuserquerysservice, Ibaseuserquerysservice> (). Getparamquerybyid (UserInfo, request, ref pquery);

Figure 2.4

1.2.7. Demo sample

Program Path:

/demo/demosingletableadvancedquery/demosingletableadvancedquery

You can add a menu view in your program by following this path

1.1. Precautions

First, if you have advanced queries for multiple table queries, you need to define flagsession as false and define each column as a table name in the object defined in the Controller. Column Name

, the frame part is the wording that should be used

Figure 2.5

Second page when multiple tables are used for advanced queries, if there are multiple tables that need to be called in the same controller for advanced queries, separate the ID values of each table, regardless of whether it appears on the same cshtml page. When called, each table needs to add code for the query condition separately in the Getadvancedquerycolumns method in Figure 2.5. For example, we also have an advanced query for a table with ID gridlist, then add the following code to the previous line of return:

List. ADD (New keyvaluepair<string, object> ("Gridlist", New object[]{

New string[]{"Demosingletable.code", "number", "Validatebox"},

New object[]{"Dropdownsingle", "Data Dictionary", "ComboBox", this. Getitemslistcategorybs ("Itemsgender", "ItemCode", "ItemName")},

New object[]{"A", "a", "Combotree", SNFService.Instance.BaseItemDetailsService.GetDataTable (this. UserInfo, "Itemstreetest")},

New string[]{"Num", "Quantity", "Numberbox", "Min:0,precision:2"},

New string[]{"Money", "Amount", "Numberspinner", "Min:0,precision:2"},

New string[]{"Ischeckbox", "check box", "checkbox"},

New string[]{"Datebox", "date", "DateRange"},

New string[]{"Approvestate", "state", "lookup", "Lookuptype: ' Itemsauditstatus '"}

}));

SNF Rapid Development Platform mvc-advanced query components