Please look at this example http://code.reloado.com/opayes/edit#preview. It works fine.

Oh,I try it,my page hava 9 datagrid,i render and reload the datagrid this error appear.
When I commented out the render and reload,this error not appear.

Code:

<div id="f000gridmaster"></div> to <div id="f016gridmaster"></div>

            var array = ['f001gridmaster','f002gridmaster','f003gridmaster','f005gridmaster','f007gridmaster','f009gridmaster','f015gridmaster','f016gridmaster','f000gridmaster'];
            var pararray=['F001','F002','F003','F005','F007','F009','F015','F016','F000'];
            for(var j=0;j<array.length;j++){
                var gridname = array[j];
                var paraname=pararray[j];

                $('#'+gridname+'').datagrid({
                    idField: 'sysfunid',
                    title: '',
                    url: '/Box/SysGroup/GetJsonFunctionGrid',
                    method: 'get',
                    dataType: "json",
                    fit: true,
                    toolbar: '',
                    fitColumns: true,
                    rownumbers: true,
                    striped: true,
                    view: scrollview,
                    autoRowHeight: false,
                    pageSize: 500,
                    pagination: false,
                    remoteSort: false,
                    columns: [[
                        { field: 'sysfunid', hidden: true, title: 'ID' },
                        { field: 'sysfunnumber', title: '菜单编码', width: '120px', sortable: true },
                        { field: 'sysfunname_cn', title: '菜单名称', width: '150px', sortable: true },
                        { field: 'views', title: 'View', width: 50,
                            formatter: function (value, rec, rowIndex) {
                                if(value=='1'){
                                    return "<input type=\"checkbox\" id=\"viewscheckboxd"+rec.sysfunid+"\"  name=\"viewscheckboxd"+rec.sysfunid+"\" onclick=\"checkboxListener("+rec.sysfunid+",'views')\" value='"+value+"' checked='true'>";
                                }
                                else{
                                    return "<input type=\"checkbox\" id=\"viewscheckboxd"+rec.sysfunid+"\"  name=\"viewscheckboxd"+rec.sysfunid+"\" onclick=\"checkboxListener("+rec.sysfunid+",'views')\" value='"+value+"'>";
                                }
                            } },
                        { field: 'adds', title: 'Append', width: 50,
                            formatter: function (value, rec, rowIndex) {
                                if(value=='1'){
                                    return "<input type=\"checkbox\" id=\"addscheckboxd"+rec.sysfunid+"\"  name=\"addscheckboxd"+rec.sysfunid+"\" onclick=\"checkboxListener("+rec.sysfunid+",'adds')\" value='"+value+"' checked='true'>";
                                }
                                else{
                                    return "<input type=\"checkbox\" id=\"addscheckboxd"+rec.sysfunid+"\"  name=\"addscheckboxd"+rec.sysfunid+"\" onclick=\"checkboxListener("+rec.sysfunid+",'adds')\" value='"+value+"'>";
                                }
                            }
                        },
                    ]],
                    queryParams: {
                        id: id,
                        funnumber:paraname,
                    },
                    singleSelect: true,
                    selectOnCheck: false,
                    checkOnSelect: false,
                    onLoadSuccess: function (data) {
                        if (data) {
                            $.each(data.rows, function (index, item) {
                                if (item.checked) {
                                    $('#'+gridname+'').datagrid("checkRow", index);
                                }
                            });
                        }
                    }
                });
            }

I write a javascript function.
The function is close the tabs, when I call the function,the chrome console a error:
Uncaught TypeError: Cannot read property 'nodeName' of undefined

Code:

 
      <div id="main_layout" class="easyui-layout" style="width:100%;height:100%;">
       
            <div data-options="region:'north'" style="height:28px">
              </div>
        
            <div data-options="region:'center'" title="">
                <div id="divtabs" class="easyui-tabs" fit="true">
                    <div id="f001divtab" title="Tab1" style="padding:0px">
                        <div id="f001gridmaster"></div>
                    </div>
                    <div id="f002divtab" title="Tab2" style="padding:0px">
                        <div id="f002gridmaster"></div>
                    </div>
                    <div id="f003divtab" title="Tab3" style="padding:0px">
                        <div id="f003gridmaster"></div>
                    </div>
                    <div id="f005divtab" title="Tab4" style="padding:0px">
                        <div id="f005gridmaster"></div>
                    </div>
                    <div id="f007divtab" title="Tab5" style="padding:0px">
                        <div id="f007gridmaster"></div>
                    </div>
                    <div id="f009divtab" title="Tab6" style="padding:0px">
                        <div id="f009gridmaster"></div>
                    </div>
                    <div id="f015divtab" title="Tab7" style="padding:0px">
                        <div id="f015gridmaster"></div>
                    </div>
                    <div id="f016divtab" title="Tab8" style="padding:0px">
                        <div id="f016gridmaster"></div>
                    </div>
                    <div id="f000divtab" title="Tab9" style="padding:0px">
                        <div id="f000gridmaster"></div>
                    </div>
                </div>
            </div>
</div>


    function checkData(){
        $('#divtabs').tabs('close',1);
    }

Thanks.solved.

I want save the data before use click the pagination,Is has the click events?

Here have one scene,like post sales order or purchase order.
we don't know the client add product detail data rows. mybe ten thousand rows.
so big data only post once use the datagrid,how can mange the function before post the service?
use the normal datagrid is very slowly.

I saw the datagrid extension method from the web.
I used this extension method,
If datagrid has two cell,when I select all the MatCode cell text and loose the mouse left key,
the select text turn unselect,so I I can't copy the cell text.
May be this extension function disturbed,
when I click the Quantity cell first, and copy the MatCode cell text,it's perfectly normal.
I don't know how can I fix this problem.
If you don't understand my description I will do better description.
Thanks.

Code:

{ field: 'ma_code', title: 'MatCode', width: '110px', sortable: true },
{
                    field: 'qty', title: 'Quantity', width: '100px', editor: {
                        type: 'text', options: {
                            required: true
                        }
                    }
                }

Code:

    (function ($) {
        function nav(target) {
            var dg = $(target);
            var opts = dg.datagrid('options');
            dg.datagrid('getPanel').attr('tabindex', 1).css('outline-style', 'none').unbind('.cellediting').bind('keydown.cellediting', function (e) {
                switch (e.keyCode) {
                    case 37:  // left
                        gotoCell(target, 'left');
                        break;
                    case 39:  // right
                        gotoCell(target, 'right');
                        break;
                    case 38:  // up
                        gotoCell(target, 'up');
                        break;
                    case 40:  // down
                        gotoCell(target, 'down');
                        break;
                    case 13:  // enter
                        var cell = $(this).find('td.datagrid-row-selected');
                        if (cell.length) {
                            var field = cell.attr('field');
                            var index = cell.closest('tr.datagrid-row').attr('datagrid-row-index');
                            dg.datagrid('editCell', {
                                index: index,
                                field: field
                            });
                        }
                        break;
                }
                return false;
            });
        }

        function gotoCell(target, p) {
            var dg = $(target);
            var opts = dg.datagrid('options');
            var cell = dg.datagrid('getPanel').find('td.datagrid-row-selected');
            if (typeof p == 'object') {
                cell.removeClass('datagrid-row-selected');
                cell = opts.finder.getTr(target, p.index).find('td[field="' + p.field + '"]');
                cell.addClass('datagrid-row-selected');
                return;
            }
            if (!cell) { return; }
            var field = cell.attr('field');
            var tr = cell.closest('tr.datagrid-row');
            var index = parseInt(tr.attr('datagrid-row-index'));
            var td = cell;
            if (p == 'up' && index > 0) {
                td = opts.finder.getTr(dg[0], index - 1).find('td[field="' + field + '"]');
            } else if (p == 'down' && index < dg.datagrid('getRows').length - 1) {
                td = opts.finder.getTr(dg[0], index + 1).find('td[field="' + field + '"]');
            } else if (p == 'left') {
                td = td.prev();
            } else if (p == 'right') {
                td = td.next();
            }
            if (td.length) {
                dg.datagrid('scrollTo', td.closest('tr.datagrid-row').attr('datagrid-row-index'));
                cell.removeClass('datagrid-row-selected');
                td.addClass('datagrid-row-selected');
            }
        }

        function editCell(target, param) {
            var dg = $(target);
            var opts = dg.datagrid('options');
            var fields = dg.datagrid('getColumnFields', true).concat(dg.datagrid('getColumnFields'));
            $.map(fields, function (field) {
                var col = dg.datagrid('getColumnOption', field);
                col.editor1 = col.editor;
                if (field != param.field) {
                    col.editor = null;
                }
            });
            dg.datagrid('endEdit', param.index);
            dg.datagrid('beginEdit', param.index);
            opts.editIndex = param.index;
            var ed = dg.datagrid('getEditor', param);
            if (ed) {
                var t = $(ed.target);
                if (t.hasClass('textbox-f')) {
                    t = t.textbox('textbox');
                }
                t.focus();
                t.bind('keydown', function (e) {
                    if (e.keyCode == 13) {
                        dg.datagrid('endEdit', param.index);
                        gotoCell(target, param);
                        dg.datagrid('getPanel').focus();
                    } else if (e.keyCode == 27) {
                        dg.datagrid('cancelEdit', param.index);
                        gotoCell(target, param);
                        dg.datagrid('getPanel').focus();
                    }
                    e.stopPropagation();
                });
            }
            $.map(fields, function (field) {
                var col = dg.datagrid('getColumnOption', field);
                col.editor = col.editor1;
            });
        }

        function enableCellEditing(target) {
            var dg = $(target);
            var opts = dg.datagrid('options');
            opts.oldOnClickCell = opts.onClickCell;
            opts.onClickCell = function (index, field) {
                if (opts.editIndex != undefined) {
                    if (dg.datagrid('validateRow', opts.editIndex)) {
                        dg.datagrid('endEdit', opts.editIndex);
                        opts.editIndex = undefined;
                    } else {
                        return;
                    }
                }
                dg.datagrid('selectRow', index).datagrid('editCell', {
                    index: index,
                    field: field
                }).datagrid('gotoCell', {
                    index: index,
                    field: field
                });
                opts.oldOnClickCell.call(this, index, field);
            };
            opts.onBeforeSelect = function () {
                //return false;
            };
        }

        $.extend($.fn.datagrid.methods, {
            editCell: function (jq, param) {
                return jq.each(function () {
                    editCell(this, param);
                });
            },
            gotoCell: function (jq, param) {
                return jq.each(function () {
                    gotoCell(this, param);
                });
            },
            enableCellEditing: function (jq) {
                return jq.each(function () {
                    nav(this);
                    enableCellEditing(this);
                });
            }
        });

    })(jQuery);

I want bind and unbind the textbox click function?
I know the bind method,but I don't know unbind.

Code:

function setBtnOk{
  $("#SpCode").textbox('textbox').bind("click", function () {
            alter('OK');
    });
}

You can use it like
if('#button').linkbutton('options').disabled) return false;

Thanks.Solved.

This problem existing for a long time. I have not fix it.
The page have a datagrid. the view type is scrollview, When search not exist in my database query.  I click the doSearchPage2(). I found out the datagrid refresh(load) twice.If search the data exist,the datagrid load once,it's normal.

Code:

<div id="tb2" style="padding:0px;height:auto">
    <div>
        Type Name: <input id="btntypename" class="easyui-textbox pagetextbox" type="text">
        <a id="btnLoad2" href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="doSearchPage2()">Query1</a>
    </div>
</div>

<div id="tb" style="padding:0px;height:auto">
    <div>
        Code: <input id="btnum" class="easyui-textbox pagetextbox" type="text">
        Name: <input id="btnname" class="easyui-textbox pagetextbox" type="text">
        <a id="btnLoad" href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="doSearchPage()">Query2</a>
    </div>
</div>

<div id="main_layout" class="easyui-layout" style="width:100%;height:100%;">
    <div id="p" data-options="region:'west',split:true" title="List" style="width:25%;padding:0px">
        <div id="gridtype" inline="true"></div>
    </div>
    <div data-options="region:'center'" title="Detail">
        
    </div>
</div>

Code:

   $(function () {
        $('#gridtype').datagrid({
            title: '',
            url: '/Box/BaseDetail/TypeReload',
            method: 'get',
            dataType: "json",
            fit: true,
            toolbar: '#tb2',
            fitColumns: true,
            rownumbers: true,
            striped: true,
            view: scrollview,
            autoRowHeight: false,
            remoteSort: false,
            columns: [[
                { field: 'type_number', title: 'Type Code', width: '100px', sortable: true },
                { field: 'type_name', title: 'Type Name', width: '100px', sortable: true }
            ]],
            queryParams: {
                typenumber: '',
                typename: $('#btntypename').val()
            },
            singleSelect: true,
            onLoadSuccess: function (data2) {
                if (data2.rows.length > 0) {
                    $(this).datagrid("selectRow", 0);
                }
            },
            onClickRow: function (rowIndex, rowData) {
                doSearchPage();
            }
        });

   });

   function doSearchPage2() {
        $("#gridtype").datagrid('load', {
            typenumber: '',
            typename: $('#btntypename').val()
        });
    }

    function doSearchPage() {
       //omit code 
    }

You have created window by javascript. So please remove 'class="easyui-window"' from your <div> element.

Thanks,I know the reason,because in my first page I bind the click function to the easyui-textbox twice.
So when click the textbox the window onLoad twice.

Code:

    function bindOpenDlg() {
        $("input", $("#SupervisorName").next("span")).click(function () {
            dlgDepartment();
        });
    }

You must wait the content page to be loaded successfully before creating the datagrid '#dpggridmaster'.

Code:

<div id="dpgwindows" class="easyui-window" closed="true" title="" style="width:0px;height:0px" data-options="
		href: 'department.html',
		onLoad: function(){
			$('#dpggridmaster').datagrid({
				...
			});
		}
		"></div>

I add alert(),this show "11" message twice.

Code:

onLoad: function () {
            alert('11');
            //loadData();
        }

Sorry,I modify it.but the error is still exist.
First page have a function "dlgDepartment",add the onLoad method.
and department.html

Code:

function dlgDepartment() {
    var $win;
    $win = $("#dpgwindows").window({
        width: 700,
        height: 500,
        modal: true,
        href: '/Box/Selection/Department?formid=' + getUrlParam('formid') + '',
        title: 'Choose',
        collapsible: false,
        maximizable: true,
        minimizable: false,
        onResize: function () {
            $(this).window('center');
        },
        onLoad: function () {
            loadData();
        }
    });
    $win.window('open');
}

department.html

Code:

function loadData(){
    $('#dpggridmaster').datagrid({
            title: '',
            url: '/Box/Selection/DepartmentGroupReload',
            method: 'get',
            dataType: "json",
            fit: true,
            toolbar: '#dpgtb',
            fitColumns: true,
            rownumbers: true,
            striped: true,
            autoRowHeight: false,
            pageSize: 20,
            pagination: true,
            remoteSort: false,
            columns: [[
                { field: 'gpid', hidden: true, title: 'ID' },
                { field: 'gpnumber', title: 'Code', width: '110px', sortable: true },
                { field: 'gpname', title: 'Name', width: '140px', sortable: true },
                {
                    field: 'deleted', title: 'Status', width: '50px',
                    formatter: function (value, row, index) {
                        if (value == 'True') {
                            return '<span title="1"><font color=red>Expire</font></span>';
                        } else {
                            return '<span title="0">Normal</span>';
                        }
                    }
                }
            ]],
            queryParams: {
                formid: getUrlParam('formid'),
                typenumber: $('#dpgbtnum').val(),
                typename: $('#dpgbtnname').val(),
                funstatus: '0',
            },
            singleSelect: true,
            selectOnCheck: false,
            checkOnSelect: false,
            onLoadSuccess: function (data) {
                if (data.rows.length > 0) {
                    $('#dpggridmaster').datagrid("selectRow", 0);
                }
            },
            onDblClickRow: function (rowIndex, rowData) {
                doOkPage('0');
            }
        });
}

Please show an example to demonstrate your issue.

My first page have one "easyui-window",this window's href is department.html

Code:

<div id="dpgwindows" class="easyui-window" closed="true" title="" style="width:0px;height:0px"></div>

department.html

Code:

  <div id="dpgtb" style="padding:0px;height:auto">
    <div class="pagepanelheader">
        <a id="btnOk" href="#" class="easyui-linkbutton" iconcls="icon-ok" plain="true" onclick="doOkPage('0')">OK</a>
        <a id="btnClear" href="#" class="easyui-linkbutton" iconcls="icon-undo" plain="true" onclick="doOkPage('1')">Clear</a>
    </div>
    <div>
        Code: <input id="dpgbtnum" class="easyui-textbox pagetextbox" type="text">
        Name: <input id="dpgbtnname" class="easyui-textbox pagetextbox" type="text">
        Status:<input id="dpgcomstatus1" class="easyui-combobox" disabled="disabled" editable="false" style="width:70px;"
       name="dpgcomstatus1" data-options="valueField:'value',textField:'text',data:[{'value':'-1','text':'All'},{'value':'0','text':'Normal',selected:true},{'value':'1','text':'Expire'}]" />
        <a id="btnLoad" href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="doSearchPage()">Query</a>
    </div>
</div>

<div id="dpggridmaster"></div>

<script>
    $(function () {
        $('#dpggridmaster').datagrid({
            title: '',
            url: '/Box/Selection/DepartmentGroupReload',
            method: 'get',
            dataType: "json",
            fit: true,
            toolbar: '#dpgtb',
            fitColumns: true,
            rownumbers: true,
            striped: true,
            autoRowHeight: false,
            pageSize: 20,
            pagination: true,
            remoteSort: false,
            columns: [[
                { field: 'gpid', hidden: true, title: 'ID' },
                { field: 'gpnumber', title: 'Code', width: '110px', sortable: true },
                { field: 'gpname', title: 'Name', width: '140px', sortable: true },
                {
                    field: 'deleted', title: 'Status', width: '50px',
                    formatter: function (value, row, index) {
                        if (value == 'True') {
                            return '<span title="1"><font color=red>Expire</font></span>';
                        } else {
                            return '<span title="0">Normal</span>';
                        }
                    }
                }
            ]],
            queryParams: {
                formid: getUrlParam('formid'),
                typenumber: $('#dpgbtnum').val(),
                typename: $('#dpgbtnname').val(),
                funstatus: '0',
            },
            singleSelect: true,
            selectOnCheck: false,
            checkOnSelect: false,
            onLoadSuccess: function (data) {
                if (data.rows.length > 0) {
                    $('#dpggridmaster').datagrid("selectRow", 0);
                }
            },
            onDblClickRow: function (rowIndex, rowData) {
                doOkPage('0');
            }
        });
    });


    function doSearchPage() {
        $("#dpggridmaster").datagrid('load', {
            formid: getUrlParam('formid'),
            typenumber: $('#dpgbtnum').val(),
            typename: $('#dpgbtnname').val(),
            funstatus: $('#dpgcomstatus1').combobox('getValue'),
        });
    }


    function doOkPage(flag) {
        var pmodel = getUrlParam('pmodel');
        var row = $('#dpggridmaster').datagrid('getSelected');
        if (row) {
            var id = row.gpid;
            var code = row.gpnumber;
            var name = row.gpname
            if (flag == '1')
            {
                id = '0';
                code = '';
                name='';
            }

            $(window.dlgDepartmentGroupInfor(id,code, name));
        }
        else {
            if (flag=='0') {
                alterErrorInfo('Empty Query!');
                return false;
            }

        }
    }

</script>

When edit the column value,The footer value is not change.
How to make the footer change when editing the column value?

$('#button').linkbutton('disable');

Thank you for your reply,
I need get the linkbutton attribute disable or enable status.