如何实现自己的"onCellClick"事件处理程序 [英] How to implement my own "onCellClick" event handler

问题描述

在我的JQGrid中，我具有复选框列和下拉列表，下拉列表是通过edittype创建的:"select"，复选框是通过"custom formatter"创建的，例如:editbox:"checkbox"，格式化程序:returnCheckBox，我要编写我自己的"onChange"事件.

In my JQGrid I have check box column and drop Down drop down is created via edittype: 'select' and check boxes are created via "custom formatter" like this edittype: 'checkbox', formatter: returnCheckBox, I want to write my own "onChange" event.

因此，对于我来说，我可以为复选框编写"onchange"事件，并且可以正常运行，但是当我在复选框单元格中单击其他位置(不在复选框上)并单击返回复选框时，它将停止触发"onchange"事件.我认为行选择它会导致如何停止它的问题.

So for I been able to write my "onchange" event for check box and it works fine but when I click some where else (not on check box) in check box cell and click back on check box it stop firing the "onchange" event. I think row select it causing problem how to stop it.

这是我在做什么

$("#theGrid").jqGrid({
            datatype: 'local',
            sortname: 'value1',
            sortorder: 'desc',
            cellsubmit: 'clientArray',
            editurl: 'clientArray',
            cellEdit: true,
            colNames: ['SName', 'SType', 'DName', 'DType', 'Nullable'],
            colModel: [
                { name: 'SName', index: 'SName', width: 100 },
                { name: 'SType', index: 'Type', width: 100 },
                {
                    name: 'DName',
                    index: 'DName',
                    width: 100,
                    editable: true,
                    edittype: 'select',
                    editoptions: { value: "1:ID;2:Name" },
                },
                {
                    name: 'DType',
                    index: 'DType',
                    width: 100,
                    editable: true,
                    edittype: 'select',
                    editoptions: { value: "1:BigInt;2:VarChar(50)" }
                },
                {
                    name: 'Nullable',
                    index: 'Nullable',
                    width: 100,
                    editable: true,
                    edittype: 'checkbox',
                    //formatter: "checkbox",
                    formatter: checkedStateChange,
                    sortable: false,
                    formatoptions: {disabled : false},
                }
            ]
        });

        var gridData = [
            { SName: 'ID', SType: 'BigInt', DName: 'ID', DType: 'BigInt' },
            { SName: 'Name', SType: 'VarChar(50)', DName: 'Name', DType: 'VarChar(50)' },

        ];

        for (var i = 0; i < gridData.length; i++) {
            $("#theGrid").jqGrid('addRowData', gridData[i].value0, gridData[i]);
        }
     function checkedStateChange(cellvalue, options, rowObject) {
            return '<input type="checkbox" class="gridCheckBox"/>';
        }
$('.gridCheckBox').on('change',function(){
alert('I am in checkBoxChange method');
});

推荐答案

您发布的代码确实有很多小问题.

The code which you posted have really many small problems.

change的问题至少由于两个原因而存在.第一个:必须将绑定到change事件的绑定放在jqGrid的loadComplete回调内部.当前代码仅将change事件绑定到页面上的现有复选框.例如，通过对网格进行排序，将重新构建网格内容并创建新的复选框.因此，所有旧的绑定将不再起作用.下一个问题是由于单元格编辑而修改复选框 .如果您单击带有复选框的单元格，则旧内容将被销毁，并且另一个复选框将在同一位置创建.该复选框将具有 no change绑定.用户单击另一个单元格后，将保存当前单元格.因此，相对于formatter: "checkbox"或formatter: checkedStateChange，将取消编辑复选框，并在同一位置创建新的复选框.结果，change事件处理程序将存在于复选框中.

The problem with change exists because of at least two reasons. The first one: you have to place binding to change event inside of loadComplete callback of jqGrid. The current code bind change event only to existing checkboxs on the page. By sorting the grid for example the grid content will be rebuild and new checkboxs will be created. So all old binding will not work more. The next problem is modifying of checkboxs because of cell editing. If you click in the cell with the checkbox the old content will be destroyed and another checkbox will be created on the same place. The checkbox will have no change binding. After the user clicks on another cell the current cell will be saved. So the editing checkbox will be destroyed and new checkbox will be created in the same place with respect of formatter: "checkbox" or formatter: checkedStateChange. As the result the change event handler will be exist on the checkbox.

我个人看不到为什么在单元格编辑中同时使用formatter: checkedStateChange(或formatter: "checkbox"和formatoptions: {disabled : false})一起的任何原因.这只会带来问题.因此，更多的结果是使用formatter: "checkbox" 而没有 formatoptions: {disabled : false}而仅使用

I personally don't see any reason why you use formatter: checkedStateChange (or formatter: "checkbox" with formatoptions: {disabled : false}) together with cell editing. It makes only problems. Much more consequent would be to use formatter: "checkbox" without formatoptions: {disabled : false} and just to use afterSaveCell callback of cell editing instead of "onchange" event.

代码中的其他问题:

• name: 'SType', index: 'Type'的用法是错误的，因为在使用datatype: "local"的情况下，index的值必须与name的值相同.当前设置不会在SType列中进行正确的排序或搜索.我严格建议您从colModel
中删除所有index属性
• 您在DType列中使用了editoptions: { value: "1:BigInt;2:VarChar(50)" }，这被认为是错误的.正确值应为editoptions: { value: "BigInt:BigInt;VarChar(50):VarChar(50)" }.如果需要使用value: "1:BigInt;2:VarChar(50)"，则输入数据应在DType列中包含1和2值，并且应使用.
• 您可以删除colNames选项，因为它包含与colModel的name属性值相同的值.
• 您不应从不使用循环中调用的addRowData用数据填充网格.取而代之的是，您应该在创建jqGrid之前移动gridData的定义，并在网格中包含data: gridData选项.
• 该网格没有寻呼机.尽管如此，本地分页仍然有效，并且分页站点为20(它是选项

• The usage of name: 'SType', index: 'Type' is wrong because index value have to be the same as name value in case of usage datatype: "local". The current settings will don't make correct sorting or searching in the column SType. I strictly recommend you to remove all index properties from colModel
• You use editoptions: { value: "1:BigInt;2:VarChar(50)" } in the DType column which seend be wrong. Correct value should be editoptions: { value: "BigInt:BigInt;VarChar(50):VarChar(50)" }. If you need to use value: "1:BigInt;2:VarChar(50)" then the input data should contains 1 and 2 values in DType column and you should use formatter: "select" additionally.
• You can remove colNames option because it contains the same value like the values of name property of colModel.
• You should never fill grid with data using addRowData called in the loop. Instead of that you should just move definition of gridData before creating of jqGrid and include data: gridData option in the grid.
• The grid have no pager. Nevertheless the local paging still work and the pager site is 20 (it's default value of the option rowNum). Using addRowData you can fill more es 20 rows, but if the user click on a column header before starting of cell editing then the grid will be sorted and only the first 20 rows of result will be displayed. If you want to use local paging you have to include rowNum option with some large enough value, like rowNum: 10000.
• It is strictly recommended to use gridview: true option to improve performance of grids and to use autoencode: true option to interpret the input data as pure data and not like HTML fragments. It will protect you from strange errors.
• If colModel which you posted is full then the option sortname: 'value1' is wrong because the input data don't contains value1 property.

这篇关于如何实现自己的"onCellClick"事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！