Copy codeThe Code is as follows: <script type = "text/javascript" charst = "UTF-8"> var editFlag = undefined; // set an editing flag
// When the layout framework points to href, it only takes the part in the middle of the html page body, so you can write the page like this.
// The datagrid contains many attributes. Therefore, use js to initialize the datagrid framework.
$ (Function (){
$ ("# Dg"). datagrid ({
Url: "GetJson. ashx ", // points to a general processing program or a controller. The returned data must be in Json format. You can directly assign values to Json format data. I will use Json data in demo as an example, I will not write the background code, but I will explain the precautions returned by the background.
IconCls: "icon-add ",
FitColumns: false, // if it is set to true, the column will automatically adapt to the table width to prevent horizontal scrolling. If it is set to false, the column size will be automatically matched.
// Toolbar: Set the toolbar at the top of the table as an array
IdField: 'id', // id column, which is generally set to id and may be case sensitive.
LoadMsg: "loading data for you", // statements displayed to users when loading data
Pagination: true, // display the lowest page Toolbar
Rownumbers: true, // displays the number of rows 1, 2, 3, 4...
PageSize: 10, // Number of pages to read, that is, the value passed to the background when reading data
PageList: [10, 20, 30], // you can adjust the data displayed on each page, that is, adjust the data of pageSize each time you request data from the background
// Because the datagrid has too many attributes, I will not introduce them all. If necessary, you can refer to its API
SortName: "name", // The sort field used to initialize the table must be the same as the field name in the database.
SortOrder: "asc", // forward
Columns :[[
{
Field: 'code', title: 'code', width: 100,
Editor: {// set it to editable
Type: 'validatebox', // the built-in styles of the editing style include text, textarea, checkbox, numberbox, validatebox, datebox, combobox, and combotree.
Options :{}
}
},
{
Field: 'name', title: 'name', width: 100, sortable: true,
Editor: {// set it to editable
Type: 'validatebox', // sets the editing format
Options :{
Required: true // sets the edit rule attribute.
}
}
}, // Sortable: true. You can change the ascending or descending order when you click this column.
{
Field: 'addr ', title: 'addr', width: 100,
Editor: {// set it to editable
Type: 'datetimebox', // here we will perform a datetimebox Extension
Options :{
Required: true // sets the edit rule attribute.
}
}
}
], // Here there are two square brackets because they can be made into a crystal report form. For details, see the demo.
Toolbar: [{// Add a button to the header of the dategrid form
Text: "add ",
IconCls: "icon-add ",
Handler: function (){
If (editFlag! = Undefined ){
$ ("# Dg"). datagrid ('enabled', editFlag); // end the editing and input the edited row.
}
If (editFlag = undefined) {// prevents too many rows from being added at the same time
$ ("# Dg"). datagrid ('insertrow', {// Add data in the specified row, appendRow is to add data in the last row
Index: 0, // The number of rows starts from 0
Row :{
Code :'',
Name: 'enter your name ',
Addr :''
}
});
$ ("# Dg"). datagrid ('ineinedit ', 0); // enable editing and input the row to be edited
EditFlag = 0;
}
}
}, '-', {// '-' Is to add a vertical line in the middle of the two buttons to separate them.
Text: "delete ",
IconCls: "icon-remove ",
Handler: function (){
// Select the row to be deleted
Var rows = $ ("# dg"). datagrid ('getselection ');
If (rows. length> 0) {// select several rows to trigger the event
$. Message. confirm ("prompt", "Are you sure you want to delete the data? ", Function (res) {// prompt whether to delete
If (res ){
Var codes = {};
For (var I = 0; I <rows. length; I ++ ){
Codes. push (rows [I]. code );
}
Console.info (codes. join (','); // concatenate a string and pass it to the background for data processing. Delete it cyclically. Refresh the datagrid
}
});
}
}
},'-',{
Text: "modify ",
IconCls: "icon-edit ",
Handler: function (){
// Select a row for editing
Var rows = $ ("# dg"). datagrid ('getselection ');
If (rows. length = 1) {// if a row is selected, the event is triggered.
If (editFlag! = Undefined ){
$ ("# Dg"). datagrid ('enabled', editFlag); // end the editing and input the edited row.
}
If (editFlag = undefined ){
Var index = $ ("# dg"). datagrid ('getrowindex ', rows [0]); // obtain the index of the selected row
$ ("# Dg"). datagrid ('ineinedit ', index); // enable editing and input the row to be edited
EditFlag = index;
}
}
}
},'-',{
Text: "save ",
IconCls: "icon-save ",
Handler: function (){
$ ("# Dg"). datagrid ('enabled', editFlag );
}
},'-',{
Text: "undo ",
IconCls: "icon-redo ",
Handler: function (){
EditFlag = undefined;
$ ("# Dg"). datagrid ('rejectchanges ');
}
}, '-'],
OnAfterEdit: function (rowIndex, rowData, changes) {// triggered when the endEdit is added and saved
Console.info (rowData); // you can see the data passed to the background in the Firefox console. here we can use this data to asynchronously add it to the background. After adding the data, refresh the datagrid.
EditFlag = undefined; // Reset
}, OnDblClickCell: function (rowIndex, field, value) {// double-click the row to modify the content
If (editFlag! = Undefined ){
$ ("# Dg"). datagrid ('enabled', editFlag); // end the editing and input the edited row.
}
If (editFlag = undefined ){
$ ("# Dg"). datagrid ('ineinedit ', rowIndex); // enable editing and input the row to be edited
EditFlag = rowIndex;
}
}
});
});
// Click the search button to start the event
Function searchFunc (){
Alert ("123 ");
$ ("# Dg "). datagrid ("load", sy. serializeObject ($ ("# searchForm "). form (); // transmits the element sequence in the searchForm to the background as an object
// Here we will introduce the use of reload. When reload is used, the current page will be remembered by default. When we click query, if we only find three pieces of data, we will display 10 pieces of data on each page, the current page number is 2, so we will not be able to see the results of our query on the current page, only to jump forward the page will be seen, but this will not happen with load
}
// Click the Clear button to start the event
Function clearSearch (){
$ ("# Dg"). datagrid ("load", {}); // reload the data. If no data is entered, the value passed to the background is null.
$ ("# SearchForm"). find ("input"). val (""); // locate all input tags in the form and clear them
}
</Script>
<Div class = "easyui-tabs" fit = "true" border = "false">
<Div title = "data display table" border = "false" fit = "true">
<Div class = "easyui-layout" fit = "true" border = "false">
<! -- Because the query requires input conditions, but the toolbar format is not good, we write the query information in the header north of the Layout framework -->
<! -- Here we try to make the display style similar to the toolbar style, so we first find the toolbar style and copy it. -->
<Div data-options = "region: 'north', title: 'advanced query'" style = "height: 100px; background: # F4F4F4;">
<Form id = "searchForm">
<Table>
<Tr>
<Th> User name: </th>
<Td>
<Input name = "name"/> </td>
</Tr>
<Tr>
<Th> creation start time </th>
<Td>
<Input class = "easyui-datetimebox" editable = "false" name = "subStartTime"/> </td>
<! -- Because the data in the datebox framework must be in the time format, we use editable = "false" to disable manual input to avoid an error. -->
<Th> creation end time </th>
<Td>
<Input class = "easyui-datetimebox" editable = "false" name = "nsubEndTimeame"/> </td>
<Td> <a class = "easyui-linkbutton" href = "javascript: void (0);" onclick = "searchFunc (); "> Search </a> </td>
<Td> <a class = "easyui-linkbutton" href = "javascript: void (0);" onclick = "clearSearch (); "> clear </a> </td>
</Tr>
</Table>
</Form>
</Div>
<Div data-options = "region: 'center', split: false">
<Table id = "dg">
</Table>
</Div>
</Div>
</Div>
</Div>
Extended editor method: datetimebox
Copy codeThe Code is as follows: $ (function (){
/* Extend the datetimebox method of Editors */
$. Extend ($. fn. datagrid. defaults. editors ,{
Datetimebox: {// name the Method
Init: function (container, options ){
Var editor = $ ('<input/>'). appendTo (container );
Options. editable = false; // you cannot enter the value manually.
Editor. datetimebox (options );
Return editor;
},
GetValue: function (target) {// Value
Return $ (target). datetimebox ('getvalue ');
},
SetValue: function (target, value) {// set the value
$ (Target). datetimebox ('setvalue', value );
},
Resize: function (target, width ){
$ (Target). datetimebox ('resize', width );
},
Destroy: function (target ){
$ (Target). datetimebox ('deststroy'); // destroy the generated panel
}
}
});
});
Figure:
