Copy code The code is as follows: var editFlag = undefined;//Set an edit flag<br>//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 <br>//The datagrid contains many attributes, so try to use js to initialize the datagrid framework <br>$(function () {<br>$(" #dg").datagrid({<br>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. <br>iconCls: "icon-add",<br>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 <br>//toolbar Set the toolbar at the top of the table in the form of an array <br>idField: 'id', //Identify the column, generally set to id, may be case-sensitive, please pay attention <br>loadMsg: "Working hard to load data for you", //The statement displayed to the user when loading data<br>pagination: true, //Show the bottom paging tool Column<br>rownumbers: true, //Display row numbers 1, 2, 3, 4...<br>pageSize: 10, //Read the number of paging items, that is, the value passed when reading data to the background<br>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<br>//Since the datagrid has too many attributes, I will not change it every time All are introduced, if necessary, you can see its API<br>sortName: "name", //The sort field based on when initializing the table must be the same as the field name in the database<br>sortOrder: "asc", / /Normal sequence<br>columns: [[<br>{<br>field: 'code', title: 'Code', width: 100,<br>editor: {//Set it as editable<br>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 <br>options: {}<br>}<br>},<br>{<br>field: 'name', title: 'Name', width: 100, sortable: true,<br>editor: {//Set it as editable<br>type: 'validatebox',// Set editing format<br>options: {<br>required: true//Set editing rule attributes<br>}<br>}<br>},//sortable:true When you click the column, you can change the ascending and descending order<br>{<br>field: 'addr', title: 'addr', width: 100,<br>editor: {//Set it as editable<br>type: 'datetimebox',//Here we will make a Extension of datetimebox <br>options: {<br>required: true//Set editing rule attributes <br>}<br>}<br>}<br>]],//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<br>toolbar: [{//Add a button to the head of the dategrid form<br>text: "Add",<br>iconCls: "icon-add", <br>handler: function () {<br>if (editFlag != undefined) {<br>$("#dg").datagrid('endEdit', editFlag);//End editing, pass in the previously edited Row<br>}<br>if (editFlag == undefined) {//Prevent too many added rows from being opened at the same time<br>$("#dg").datagrid('insertRow', {//Add data in the specified row , appendRow adds data to the last row <br>index: 0, // The number of rows starts from 0 <br>row: {<br>code: '',<br>name: 'Please enter your name',<br>addr: ''<br>}<br>});<br>$("#dg").datagrid('beginEdit', 0);//Enable editing and pass in the line to be edited<br>editFlag = 0;<br>}<br>}<br>}, '-', {//'-' is to add a vertical line between the two buttons to separate them, which looks comfortable<br>text: "Delete" ,<br>iconCls: "icon-remove",<br>handler: function () {<br>//Select the rows to be deleted<br>var rows = $("#dg").datagrid('getSelections' ;", function (res) {//Prompt whether to delete <br>if (res) {<br>var codes = {};<br>for (var i = 0; i < rows.length; i ) {<BR>codes.push(rows[i].code);<BR>}<BR>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<BR>}<BR>});<BR>}<BR>}<BR>}, '-', {<BR>text: "Modify",<BR>iconCls: "icon-edit ",<BR>handler: function () {<BR>//Select a row for editing<BR>var rows = $("#dg").datagrid('getSelections');<BR>if (rows.length = = 1) {//The event is triggered when a row is selected<BR>if (editFlag != undefined) {<BR>$("#dg").datagrid('endEdit', editFlag);//End editing, before passing in Edited row<BR>}<BR>if (editFlag == undefined) {<BR>var index = $("#dg").datagrid('getRowIndex', rows[0]);//Get the selected row Index<BR>$("#dg").datagrid('beginEdit', index);//Enable editing and pass in the line to be edited<BR>editFlag = index;<BR>}<BR>}<BR>}<BR>}, '-', {<BR>text: "save",<BR>iconCls: "icon-save",<BR>handler: function () {<BR>$("#dg" ).datagrid('endEdit', editFlag);<BR>}<BR>}, '-', {<BR>text: "Undo",<BR>iconCls: "icon-redo",<BR>handler: function () {<BR>editFlag = undefined;<BR>$("#dg").datagrid('rejectChanges');<BR>}<BR>}, '-'],<BR>onAfterEdit: function ( rowIndex, rowData, changes) {//After adding endEdit, trigger when saving <BR>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<BR>editFlag = undefined;//Reset<BR>}, onDblClickCell: function (rowIndex, field, value) {//Double-click the row to modify the content<BR>if (editFlag != undefined) {<BR>$("#dg").datagrid('endEdit', editFlag);//End editing, pass in the previously edited line<BR>}<BR>if (editFlag == undefined) {<BR>$("#dg").datagrid('beginEdit', rowIndex);//Enable editing and pass in the row to be edited <BR>editFlag = rowIndex;<BR>}<BR> }<BR>});<BR>});</P> <P>//Click the search button to trigger an event<BR>function searchFunc() {<BR>alert("123");<BR>$("#dg").datagrid("load", sy.serializeObject($ ("#searchForm").form()));//Transfer the sequence of elements in the searchForm form to the background as an object<BR>//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<BR>}</P> <P>//Click the clear button to trigger the event<BR>function clearSearch() {<BR>$("#dg").datagrid("load", {});//Reload the data, no data is filled in, to The value passed in the background is empty <BR>$("#searchForm").find("input").val("");//Find all input tags under the form and clear them <BR>}<BR>< ;/script><br><div class="easyui-tabs" fit="true" border="false"><br><div title="Data display table" border="false" fit=" true"><br><div class="easyui-layout" fit="true" border="false"><br><!--Because the query requires input conditions, but it is not good in the form of toolbar , so we write the query-related information in the header north of the Layout frame --><br><!-- Here we try to make the displayed style similar to the toolbar style, so we first look for the toolbar style, And copy it--><br><div data-options="region:'north',title:'Advanced Query'" style="height: 100px; background: #F4F4F4;"><br>< ;form id="searchForm"><br><table><br><tr><br><th>User name: </th><br><td><br>< input name="name" /></td><br></tr><br><tr><br><th>Creation start time</th><br><td> ;<BR><input class="easyui-datetimebox" editable="false" name="subStartTime" /></td><br><!--Because the data on the datebox frame must be in time format Yes, so we use editable="false" to prohibit users from manually input to avoid errors --><br><th>Creation end time</th><br><td><br><input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td><br><td><a class="easyui-linkbutton" href="javascript:void(0 );" onclick="searchFunc();">Find</a></td><br><td><a class="easyui-linkbutton" href="javascript:void(0) ;" onclick="clearSearch();">Clear</a></td><br></tr><br></table><br></form><br> </div><br><div data-options="region:'center',split:false"><br><table id="dg"><br></table><br></div><br></div><br></div><br></div><br> </div> <br> <p>Extended editor method: datetimebox</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="5698" class="copybut" id="copybut5698" onclick="doCopy('code5698')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code5698"> <br>$(function () {<br>/*Extension Editors’ datetimebox method*/<br>$.extend($.fn.datagrid.defaults.editors, {<br>datetimebox: {//Name the method<br>init: function (container, options) {<br>var editor = $('<input />').appendTo(container);<br>options.editable = false;//Set it cannot be entered manually <br>editor.datetimebox(options);<br> return editor;<br>},<br>getValue: function (target) {//Get value<br>return $(target).datetimebox('getValue');<br>},<br>setValue: function ( target, value) {//Set value<br>$(target).datetimebox('setValue', value);<br>},<br>resize: function (target, width) {<br>$(target) .datetimebox('resize', width);<br>},<br>destroy: function (target) {<br>$(target).datetimebox('destroy');//Destroy the generated panel<br>} <br>}<br>});<br>});<br> </div> <p><strong>Icon: </strong></p> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/20130408001.jpg"></p> <p> </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
