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. https://blog.csdn.net/huyuyang6688/article/details/46687767

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.

<html>
<head>
     @*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
            initTable();    
        });

         // 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
                        AddNews();
                    }
                }, '-', {
                    id: 'btncut',
                    text: ' modify',
                    iconCls: 'icon-cut',
                    handler: function () {
                         // Method of implementing modifications
                        UpdateLzjs();
                    }
                }, '-', {
                    id: 'btnCancle',
                    text: ' removing',
                    iconCls: 'icon-remove',
                    handler: function () {
                         // Implement a method to delete all data directly
                        DeleteLzjs();
                    }
                }]
            });
        }

		
        $.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...
        }     
        }
    </script>
</head>
<body>
        <table id="test" style="width: 955px; margin: 20px 0 10px 8px" title=" News" iconcls="icon-edit">
        </table>
</body>
</html>

(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 Asp.net MVC)


Recommended>>
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字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号