cool hit counter Embedding Combobox in EasyUI's DataGrid_Intefrankly

Embedding Combobox in EasyUI's DataGrid

Copyright: This is an original post by the blogger and may not be reproduced without the blogger's permission.

While working on a project, I needed to embed Combobox in EasyUI's DataGrid. It took several days of work, and with the help of everyone, I finally saw it in its true form.

The core code is as follows.

     @*Add Jquery EasyUI styles*@
    <link href="@Url.Content("../../Content/JqueryEasyUI/themes/default/easyui.css")" rel="stylesheet" />
    <link href="@Url.Content("../../Content/JqueryEasyUI/themes/icon.css")" rel="stylesheet" />

     @*Add JS files for Jquery, EasyUI and easyUI's language packs*@
    <script src="@Url.Content("../../Content/JqueryEasyUI/jquery-1.8.0.min.js")"></script>
    <script src="@Url.Content("../../Content/JqueryEasyUI/jquery.easyui.min.js")"></script>
    <script src="@Url.Content("../../Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js")"></script>

     @*JS code to implement operations on EasyUI's DataGird control*@
    <script type="text/javascript">
        $(function () {
             // event executed when the page is first refreshed

         // Implement the binding operation of the NewsDataGird control
        function initTable(queryData) {
            $('#test').datagrid({            //Locate toTable label,Table taggedID betest
                fitColumns: true,
                url: '/News/QueryAllNews',   // point to the backend of theAction to get information about the current userJson Data in format
                title: ' Press Releases',           // Table title
                 striped: true, //Zebra effect
                 pagination: true, //pagination toolbar
                 rownumbers: true, //show row numbers
                 onClickCell: onClickCell, //event triggered by clicking on the cell (important)
                 onAfterEdit:onAfterEdit, // event triggered after editing a cell (important)
                idField: 'NewsID',           // identifier field
                 queryParams: queryData, //parameters for asynchronous queries
                columns: [[
	                  { field: 'ck', checkbox: true },
	                  { title: ' primary key', field: 'NewsID', sortable: true, hidden: true, },
                    <span style="white-space:pre">	</span>  { title: ' Content Title', field: 'NewsTitle', width: 50, sortable: true },
                  <span style="white-space:pre">	</span>  { title: ' specifics', field: 'NewsContent', sortable: true, hidden: true, },
                  <span style="white-space:pre">	</span>  { title: ' Creation time', field: 'TimeStamp', sortable: true, },
                  <span style="white-space:pre">	</span>  { title: ' Category', field: 'CategoryName', sortable: true, },
                  <span style="white-space:pre">	</span>  { title: ' founder', field: 'UserName', sortable: true },
                   <span style="white-space:pre">	</span>  {
                            title: ' be deny Show on the front page', field: 'IsShow', sortable: true,                      
                            editor: {
                                      type: 'combobox',
                                      options: {                             
                                                 valueField: 'text',
                                                 textField: 'text',
                                                 method: 'get',
                                                 url: '/News/ReturnIsShowData',
                                                 required: true
                toolbar: [{
                    id: 'btnadd',
                    text: ' increase',
                    iconCls: 'icon-add',
                    handler: function () {
                         // Implement a pop-up page with registration information
                }, '-', {
                    id: 'btncut',
                    text: ' modify',
                    iconCls: 'icon-cut',
                    handler: function () {
                         // Method of implementing modifications
                }, '-', {
                    id: 'btnCancle',
                    text: ' removing',
                    iconCls: 'icon-remove',
                    handler: function () {
                         // Implement a method to delete all data directly

        $.extend($.fn.datagrid.methods, {
            editCell: function (jq, param) {
                return jq.each(function () {
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field) {
                            col.editor = null;
                    $(this).datagrid('beginEdit', param.index);
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;

        var editIndex = undefined;
 	// Determine if editing is finished
        function endEditing() {
            if (editIndex == undefined) { return true }
            if ($('#test').datagrid('validateRow', editIndex)) {
                $('#test').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
 	// Events triggered by clicking on a cell
        function onClickCell(index, field) {
            if (endEditing()) {
                $('#test').datagrid('selectRow', index)
						.datagrid('editCell', { index: index, field: field });
                editIndex = index;
 	// event triggered after editing a cell
        function onAfterEdit(index, row, changes) {
             //... The action that needs to be performed after executing the edit cell...
 	    //... The action that needs to be performed after executing the edit cell...
        <table id="test" style="width: 955px; margin: 20px 0 10px 8px" title=" News" iconcls="icon-edit">

(located) atCombobox typeeditor of data sourcesurl: '/News/ReturnIsEnabledData' correspondinglyController The corresponding method in( actually be Spelled out a particularly simple one in the backgroundjson string together):

public string ReturnIsShowData()
            string strJson = "[{"id":"yes","text":" be"},{"id":"no","text":" deny"}]";          
            return strJson;

When the value in the Combobox is selected, you only need to write the operation to be performed in the onAfterEdit(index, row, changes) function can be, index for the editor's row number, the default from 0; row for the edited cell is located in the entire row, row.column name can get this row this column data, such as row.IsShow can get the edited cell is located in the IsShow column data.

(The content of this article is based on MVC)

1、Python new feature spoiler intraexpression assignment
2、The lovehate relationship of the magic capital of the empire under big data
3、JavaScript is still at the top of the list with TypeScript not far behind
4、Is it discrimination to pay men and women differently for the same work Ubers big data tells you this is normal
5、If I didnt tell you youd never know it was an Audi commercial

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送