Deletion, addition and modification of datagrid framework_jquery

Copy code The code is as follows: var editFlag = undefined;//Set an edit flag //Because the layout frame points to href, only fetch The middle part of the body of the html page, so the page can be written like this //The datagrid contains 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 used the demo The built-in Json data is used as an example. I will not write the background code, but I will talk about the precautions returned by the background. iconCls: "icon-add", fitColumns: false, //Set to true and it will automatically Make the column adapt to the width of the table to prevent horizontal scrolling, false to automatically match the size //toolbar Set the toolbar at the top of the table in the form of an array idField: 'id', //Identify the column, generally 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, //Show the bottom paging tool Column rownumbers: true, //Display row numbers 1, 2, 3, 4... pageSize: 10, //Read the number of paging items, 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 change it every time All are introduced, if necessary, you can see 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", / /Normal sequence columns: [[ { field: 'code', title: 'Code', width: 100, editor: {//Set it as editable type : 'validatebox',//Set the editing style. The built-in styles are: text, textarea, checkbox, numberbox, validatebox, datebox, combobox, combotree and can be expanded by yourself options: {} } }, { field: 'name', title: 'Name', width: 100, sortable: true, editor: {//Set it as editable type: 'validatebox',// Set editing format options: { required: true//Set editing rule attributes } } },//sortable:true When you click the column, you can change the ascending and descending order { field: 'addr', title: 'addr', width: 100, editor: {//Set it as editable type: 'datetimebox',//Here we will make a Extension of datetimebox options: { required: true//Set editing rule attributes } } } ]],//The reason why there are two square brackets here, This is because it can be made into a crystal report. For details, please see demo toolbar: [{//Add a button to the head of the dategrid form text: "Add", iconCls: "icon-add", handler: function () { if (editFlag != undefined) { $("#dg").datagrid('endEdit', editFlag);//End editing, pass in the previously edited Row } if (editFlag == undefined) {//Prevent too many added rows from being opened at the same time $("#dg").datagrid('insertRow', {//Add data in the specified row , appendRow adds data to the last row index: 0, // The number of rows starts from 0 row: { code: '', name: 'Please enter your name', addr: '' } }); $("#dg").datagrid('beginEdit', 0);//Enable editing and pass in the line to be edited editFlag = 0; } } }, '-', {//'-' is to add a vertical line between the two buttons to separate them, which looks comfortable text: "Delete" , iconCls: "icon-remove", handler: function () { //Select the rows to be deleted var rows = $("#dg").datagrid('getSelections' ;", function (res) {//Prompt whether to delete if (res) { var codes = {}; for (var i = 0; i codes.push(rows[i].code); } console.info(codes.join(','));//Splice the string and pass it to the background for data processing, and delete it in a loop, Refresh the datagrid after success } }); } } }, '-', { text: "Modify", iconCls: "icon-edit ", handler: function () { //Select a row for editing var rows = $("#dg").datagrid('getSelections'); if (rows.length = = 1) {//The event is triggered when a row is selected if (editFlag != undefined) { $("#dg").datagrid('endEdit', editFlag);//End editing, before passing in Edited row } if (editFlag == undefined) { var index = $("#dg").datagrid('getRowIndex', rows[0]);//Get the selected row Index $("#dg").datagrid('beginEdit', index);//Enable editing and pass in the line to be edited editFlag = index; } } } }, '-', { text: "save", iconCls: "icon-save", handler: function () { $("#dg" ).datagrid('endEdit', editFlag); } }, '-', { text: "Undo", iconCls: "icon-redo", handler: function () { editFlag = undefined; $("#dg").datagrid('rejectChanges'); } }, '-'], onAfterEdit: function ( rowIndex, rowData, changes) {//After adding endEdit, trigger when saving console.info(rowData);//The data passed to the background can be seen in the console of Firefox browser, here we can Use these data to add asynchronously to the background. After the addition is completed, refresh the datagrid editFlag = undefined;//Reset }, onDblClickCell: function (rowIndex, field, value) {//Double-click the row to modify the content if (editFlag != undefined) { $("#dg").datagrid('endEdit', editFlag);//End editing, pass in the previously edited line } if (editFlag == undefined) { $("#dg").datagrid('beginEdit', rowIndex);//Enable editing and pass in the row to be edited editFlag = rowIndex; } } }); });

//Click the search button to trigger an event function searchFunc() { alert("123"); $("#dg").datagrid("load", sy.serializeObject($ ("#searchForm").form()));//Transfer the sequence of elements in the searchForm form to the background as an object //Here we introduce the use of reload. When using reload, the current page will be remembered by default. When clicking query, if we only find three pieces of data, we display 10 pieces of data on each page, and the current page number is 2, then we will not be able to see the results of our query on the current page, and we can only jump forward the page. I see, but this won’t happen with load }

//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 Extended editor method: datetimebox

Copy code The code is as follows: $(function () { /*Extension Editors’ datetimebox method*/ $.extend($.fn.datagrid.defaults.editors, { datetimebox: {//Name the method init: function (container, options) { var editor = $(' ').appendTo(container); options.editable = false;//Set it cannot be entered manually editor.datetimebox(options); return editor; }, getValue: function (target) {//Get value return $(target).datetimebox('getValue'); }, setValue: function ( target, value) {//Set value $(target).datetimebox('setValue', value); }, resize: function (target, width) { $(target) .datetimebox('resize', width); }, destroy: function (target) { $(target).datetimebox('destroy');//Destroy the generated panel } } }); }); Icon: