Query based on datagrid framework_jquery

复制代码 代码如下: 然后是CenterPage.html框架中的代码，也就是tabs框架中的代码：

复制代码 代码如下: //Because when the layout frame points to href, only the middle part of the html page body is taken, so the page looks like this Just write // Some datagrids contain many attributes, so try to use js to initialize the datagrid framework $(function () { $("#dg").datagrid({ url: "GetJson.ashx", //Points to a general handler or a controller. The return data is required to be in Json format. You can also directly assign Json format data. I will take the Json data that comes with the demo as an example and will not write it. The background code, but I will talk about the precautions returned by the background iconCls: "icon-add", fitColumns: false, //Set to true to automatically adapt the columns to the table width to prevent horizontal scrolling. false will automatically match the size //toolbar Set the toolbar at the top of the table and set it in the form of an array idField: 'id', //Identification column, usually set to id, may be case sensitive, please pay attention loadMsg: "Working hard to load data for you", //The statement displayed to the user when loading data pagination: true, //Display the bottom paging toolbar rownumbers: true, //Display Number of rows 1, 2, 3, 4... pageSize: 10, //Read the number of paging entries, that is, the value passed when reading data to the background pageList: [10, 20, 30] , //You can adjust the data displayed on each page, that is, adjust the pageSize data each time it requests data from the background //Since the datagrid has too many attributes, I will not introduce each one. If necessary, you can read Its API sortName: "name", //The sort field based on when initializing the table must be the same as the field name in the database sortOrder: "asc", //Forward order columns: [[ { field: 'code', title: 'Code', width: 100 }, { field: 'name', title: 'Name', width: 100, sortable: true },//sortable:true When you click on the column, you can change the ascending and descending order { field: 'addr', title: 'addr', width: 100 } ]],//The reason why there are two square brackets here is because it can be done In the form of a crystal report, see demo toolbar: [{//Add a button at the head of the dategrid form text: "Add", iconCls: "icon-add", handler : function () { } }, '-', {//'-' is to add a vertical line to separate the two buttons, which looks comfortable text: "Delete", iconCls: "icon-remove", handler: function () { } }, '-', { text: "Modify", iconCls: "icon- edit", handler: function () { } }, '-'] }); }); //Click the search button to trigger an event function searchFunc() { alert("123"); $("#dg").datagrid("load", sy.serializeObject($ ("#searchForm").form()));//Pass the sequence of elements in the searchForm form to the background as an object }

//Click the clear button to trigger the event function clearSearch() { $("#dg").datagrid("load", {});//Reload the data, no data is filled in, to The value passed in the background is empty $("#searchForm").find("input").val("");//Find all input tags under the form and clear them } &lt ;/script> &lt ;form id="searchForm"> User name: Creation start time Creation end time Find Clear

Jquery extension code:

Copy code The code is as follows: var sy = $.extend({}, sy) ;/*Define a global variable*/ sy.serializeObject = function (form) { /*Serialize elements in the form into objects, a method that extends Jquery*/ var o = {}; $.each(form. serializeArray(), function (index) { if (o[this['name']]) { o[this['name']] = o[this['name']] "," this['value']; } else { o[this['name']] = this['value']; } }); return o; };

Image: