Implementation of easyui datagrid Toolbar

When using the datagrid, you sometimes need to dynamically control the toolbar or add custom content. Here we will summarize the usage.

First: Define first and then append

The first four buttons are added using the datagrid attribute:

Toolbar: [{text: 'add', iconCls: 'icon-add', handler: function () {deviceInfoAddClick () ;}, {text: 'modify', iconCls: 'icon-edit', handler: function () {deviceInfoEditClick () ;},{ text: 'delete', iconCls: 'icon-delete', handler: function () {deviceInfoDeleteClick () ;},{ text: 'view', handler: function () {}}, '-', {text: 'refresh ', iconCls: 'icon-reload', handler: function () {deviceInfoRefreshClick () ;},{ text: 'export ', iconCls: 'icon-save', handler: function () {$ (dg ). treegrid ('reload') ;}, '-'],

The search box at the end cannot be simply added. You must first define at the front-end:

<% -- Drop-down search box -- %> <div id = "searchboxWrapper" style = "display: inline-block; padding-top: 3px; text-align: right; width: 200px; "> <input id =" searchbox "class =" easyui-searchbox "searcher =" searcherFun "prompt =" Enter the query content "style =" width: 200px; margin-top: 10px; padding-top: 10px; "> </input> <div id =" mm "style =" width: 100px "> </div>

After the datagrid is initialized, initialize the drop-down search box and append it to the end of the original toolbar.

    $(function () {            initDatagrid();            initSearchbox();            });

Function initSearchbox () {// <summary> initialize the drop-down search box </summary> // loop column name to generate a drop-down list var fields =$ (dg ). datagrid ('getcolumnfields '); var muit = ""; for (var I = 0; I <fields. length; I ++) {var opts = $ (dg ). datagrid ('getcolumnoption ', fields [I]); if (opts. table) {muit + = "<div name = '" + opts. table + ". "+ opts. column + "'>" + opts. title + "</div>";} else {muit + = "<div name = '" + fields [I] + "'>" + opts. title + "</div>" ;}}; certificate ('{mm'}.html('{mm'}.html () + muit); $ ('# searchbox '). searchbox ({menu: '# mm'}); // Add the generated search box to the toolbar $ (". datagrid-toolbar "). append ($ ("# searchboxWrapper "));}

First, fill in the drop-down search box with the loop column name, instantiate it, and append it to the end of the toolbar. Because some data is obtained through multi-table joint query, you must specify the table name and column name to be queried when defining search conditions in the drop-down box, here, we use the table and column attributes to specify

         { title: 'SmartIO', field: 'SmartIoName', table: 'Dev_SmartIO', column: 'Name', width: 80, hidden: false },                    { title: 'pSpace', field: 'PspaceName', table: 'Dev_pSpace', column: 'Name', width: 80, hidden: false },

The backend uses IBatis to query data. One method is to directly input the where statement.

    <select id="FindAllBySearchKey" resultMap="ResultMap"  parameterClass="string"   >      SELECT *,Dev_SmartIO.Name as SmartIoName,Dev_pSpace.Name as PspaceName,Dev_Teamplate.Name as DevTeamplateName      FROM [dbo].[Dev_DeviceInfo]  left join dbo.Dev_SmartIO  on [Dev_DeviceInfo].SmartIoID=Dev_SmartIO.ID  left join dbo.Dev_pSpace  on [Dev_DeviceInfo].PspaceID=Dev_pSpace.ID  left join dbo.Dev_Teamplate  on [Dev_DeviceInfo].DevTeamplateID=Dev_Teamplate.ID      where $value$ and  [IsDeleted] =0    </select>

I do not use an alias when the table is joined. Therefore, you can directly use the original table name. Column name in the where condition. This is consistent with the filter field generated by the front-end.
Click the search button to execute the searcherFun method.

Function searcherFun (value, name) {// <summary> search list </summary> loadData (name, value )}

Function loadData (searchKey, searchValue) {// <summary> load data </summary> var url = 'HTTP: // www.cnblogs.com/AjaxHandler/DevDeviceInfoHandler.ashx? Action = DeviceInfoList & tmp = '+ Math. random (). toString (); if (searchKey! = Null) url + = "& searchKey" + searchKey + "$ searchValue" + searchValue; $ (dg). datagrid ('options'). url = url ;}

After the url is set, data is automatically loaded in the background and the current page information is also taken.

/// <Summary> /// device list /// </summary> public bool DeviceInfoList () {EasyUI_datagrid grid = new EasyUI_datagrid (); try {string searchKey = this. context. request ["searchKey"]; string searchValue = this. context. request ["searchValue"]; string page = Context. request ["page"]; string rows = Context. request ["rows"]; List <Dev_DeviceInfo> list = DevService. getInstance (). findAllDeviceInfoList (searchKey, searchValue, page, rows) as List <Dev_DeviceInfo>; grid. total = DevService. getInstance (). getCountDeviceInfoList (searchKey, searchValue); list. forEach (q => grid. addRows (q); grid. success = true; return true;} catch (Exception ex) {grid. success = false; grid. msg = ex. message; return false;} finally {this. context. response. write (JsonConvert. serializeObject (grid ));}}

Note that the returned data must be in the format required by the datagrid, that is, the total and rows attributes. It's a long journey, and I 've written all the ins and outs of the data.
Type 2: Define the div directly at the front end and use the toolbar attribute to point

You need to use a drop-down menu for the toolbar, which is not easy to use by default, so the html code is defined here.

<% -- Measurement Point toolbar -- %> <div id = "pointDatagridToolbar"> <a href = "javascript: void (0) "id =" Add "> Add </a> <a href =" javascript: void (0) "id =" Edit "onclick =" TagEditClick () "> modify </a> <a href =" javascript: void (0) "id =" Del "onclick =" TagDeleteClick () "> Delete </a> <div id =" AddMenu "style =" width: 100px; "> <div onclick =" TagAddClick ('mnl ') "> analog quantity </div> <div onclick =" TagAddClick ('kgl ') "> switch quantity </div> <div onclick =" TagAddClick ('zfcl ') "> string quantity </div>

// Initialize the menu function InitMenubutton () {$ ('# add '). menubutton ({menu: '# AddMenu', iconCls: 'icon-add', plain: true}); $ ('# edit '). linkbutton ({iconCls: 'icon-edit', plain: true}); $ ('# Del '). linkbutton ({iconCls: 'icon-delete', plain: true });}

       toolbar: "#pointDatagridToolbar",

This method is the most flexible and convenient for layout.This also leads to a detour, that is, the top two rows of table, the first row of the toolbar, the second row of the datagrid, looks like a whole.

 

The last button is right aligned and uses the table layout. I cannot figure out the div.

<% -- Toolbar -- %> <div id = "dev_deviceInfo_toolbar" class = "datagrid-toolbar"> <table border = "0" cellpadding = "0" cellspacing = "0" style = "width: 100%; "> <tr> <td style =" width: 700px; "> <% -- normal device list -- %> <div id =" normal "> <div style =" float: left; padding: 0px; height: auto "> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-add', plain: true "onclick =" deviceInfoAddClick (); "> added </a> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-edit', plain: true "onclick =" deviceInfoEditClick (); "> modify </a> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-delete', plain: true "onclick =" deviceInfoDeleteClick (); "> Delete </a> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-delete', plain: true "onclick =" deviceInfoDirectDeleteClick (); "> permanently delete </a> </div> <% -- split line -- %> <div id =" separator "style =" float: left; "class =" datagrid-btn-separator "> </div> <div style =" float: left; padding: 0px; height: auto "> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-add', plain: true "onclick =" deviceInfoViewClick (); "> View </a> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-reload', plain: true "onclick =" deviceInfoRefreshClick (); "> refresh </a> </div> <div id =" Div1 "style =" float: left; "class =" datagrid-btn-separator "> </div> <% -- drop-down search box -- %> <div id =" searchboxWrapper "style =" display: inline-block; padding-top: 3px; text-align: left; width: 200px; "> <input id =" searchbox "class =" easyui-searchbox "searcher =" searcherFun "prompt =" Enter the query content "style =" width: 200px; margin-top: 10px; padding-top: 10px; "> </input> <div id =" mm "style =" width: 100px "> </div> <% -- deleted device -- %> <div id =" deleted "style =" display: none; "> <div style =" float: left; padding: 0px; height: auto "> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-edit', plain: true "onclick =" deviceInfoDirectDeleteClick (); "> Delete </a> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-delete', plain: true "onclick =" deviceInfoViewClick (); "> View </a> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-back', plain: true "onclick =" deviceInfoBackClick (); "> back </a> </div> </td> <td style =" text-align: right; "> <a href =" # "class =" easyui-linkbutton "data-options =" iconCls: 'icon-hsz-16-16 ', plain: true "onclick =" deviceInfoDeletedClick (); "> recycle bin </a> <% -- <div style =" display: inline-block; padding-top: 3px; text-align: right; width: 300px; "> </div> -- %> </td> </tr> </table> </div>