为什么jqxgrid不选中复选框或滚动网格中的无线电按钮列？

Question

我通过呈现器列使用jqxwidgets网格(jqxgrid)，该列是无线电按钮，并通过行数据值检查真假，当检查多个单选和滚动网格时，选中未选中的单选按钮(更改状态)。

cellsrenderer:function(,,rowdata){
    var radio = '<input type="radio" ' + rowdata.HasPermission?"checked":"" + '/>';
    return radio;
}

编辑：请在代码段下面运行并检查多个广播，然后滚动网格，您可以看到未选中的旧收音机已选中。

​

$(function() {
            //permission = > 1:read 2:write 3:read/write
            var data = [
            {id:1,rolename:"role1",permission:1},                                   {id:2,rolename:"role2"},
            {id:3,rolename:"role3"},
            {id:4,rolename:"role4",permission:2},
            {id:5,rolename:"role5",permission:1},                                   {id:6,rolename:"role6"},
            {id:7,rolename:"role7"},                                                 {id:8,rolename:"role8"},
            {id:9,rolename:"role9"},                                                 {id:10,rolename:"role10"},
            {id:11,rolename:"role11"},                                               {id:12,rolename:"role12"},
            {id:13,rolename:"role13"},                                                 {id:14,rolename:"role14"},            {id:15,rolename:"role15"},                                                 {id:16,rolename:"role16"},
            {id:17,rolename:"role17"},                                                 {id:18,rolename:"role18"},
            {id:19,rolename:"role19"},                                                 {id:20,rolename:"role20"},
            {id:21,rolename:"role21"},                                                 {id:22,rolename:"role22"},
            {id:23,rolename:"role23"},                                                 {id:24,rolename:"role24"},
            {id:25,rolename:"role25"},                                                 {id:26,rolename:"role26"},
            {id:27,rolename:"role27"},                                                 {id:28,rolename:"role28"},
            {id:29,rolename:"role29"},                                                 {id:30,rolename:"role30"},
            {id:31,rolename:"role31"},                                                 {id:32,rolename:"role32"},
            {id:33,rolename:"role33"},                                                 {id:34,rolename:"role34"},
            {id:35,rolename:"role35"},                                                 {id:36,rolename:"role36"},
            {id:37,rolename:"role37"},                                                 {id:38,rolename:"role38"},
            {id:39,rolename:"role39"},                                                 {id:40,rolename:"role40"}    
            ];
            // prepare the data
            var source =
            {
                datatype: "array",
                datafields: [
                { name: 'id', type: 'number' },
                    { name: 'rolename', type: 'string' },
                    { name: 'permission', type: 'number' }                   
                ],                
                id: 'id',
                localdata:data
            };
            
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#grid").jqxGrid(
            {
                width: "100%",
                height:400,
                source: dataAdapter,                
                pageable: false,
                autoheight: false,
                sortable: false,
                altrows: true,
                enabletooltips: true,
                editable: false,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                { datafield: 'id', hidden:true },
                { datafield: 'permission', hidden:true },
               { text: 'Role Name', datafield: 'rolename', width: 250 },
               {text:'Read',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var radio = "<input type='radio' name='"+rowdata.id+"'/>";
                return radio;
            }},
            {text:'Write',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var radio = "<input type='radio' name='"+rowdata.id+"'/>";
                return radio;
            }},
            {text:'Read/Write',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var radio = "<input type='radio' name='"+rowdata.id+"'/>";
                return radio;
            }}
               ]
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<div id="grid"></div>

​

Answer 1

我找到了解决我的problem.tanks的方法。

​

           var data = [];
$(function() {
debugger
           
            
            //permission = > 1:read 2:write 3:read/write
            data = [
            {id:1,rolename:"role1",permission:1},                                   {id:2,rolename:"role2"},
            {id:3,rolename:"role3"},
            {id:4,rolename:"role4",permission:2},
            {id:5,rolename:"role5",permission:1},                                   {id:6,rolename:"role6"},
            {id:7,rolename:"role7"},                                                 {id:8,rolename:"role8"},
            {id:9,rolename:"role9"},                                                 {id:10,rolename:"role10"},
            {id:11,rolename:"role11"},                                               {id:12,rolename:"role12"},
            {id:13,rolename:"role13"},                                                 {id:14,rolename:"role14"},            {id:15,rolename:"role15"},                                                 {id:16,rolename:"role16"},
            {id:17,rolename:"role17"},                                                 {id:18,rolename:"role18"},
            {id:19,rolename:"role19"},                                                 {id:20,rolename:"role20"},
            {id:21,rolename:"role21"},                                                 {id:22,rolename:"role22"},
            {id:23,rolename:"role23"},                                                 {id:24,rolename:"role24"},
            {id:25,rolename:"role25"},                                                 {id:26,rolename:"role26"},
            {id:27,rolename:"role27"},                                                 {id:28,rolename:"role28"},
            {id:29,rolename:"role29"},                                                 {id:30,rolename:"role30"},
            {id:31,rolename:"role31"},                                                 {id:32,rolename:"role32"},
            {id:33,rolename:"role33"},                                                 {id:34,rolename:"role34"},
            {id:35,rolename:"role35"},                                                 {id:36,rolename:"role36"},
            {id:37,rolename:"role37"},                                                 {id:38,rolename:"role38"},
            {id:39,rolename:"role39"},                                                 {id:40,rolename:"role40"}    
            ];
            // prepare the data
            var source =
            {
                datatype: "array",
                datafields: [
                { name: 'id', type: 'number' },
                    { name: 'rolename', type: 'string' },
                    { name: 'permission', type: 'number' }                   
                ],                
                id: 'id',
                localdata:data
            };
            
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#grid").jqxGrid(
            {
                width: "100%",
                height:400,
                source: dataAdapter,                
                pageable: false,
                autoheight: false,
                sortable: false,
                altrows: true,
                enabletooltips: true,
                editable: false,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                { datafield: 'id', hidden:true },
                { datafield: 'permission', hidden:true },
               { text: 'Role Name', datafield: 'rolename', width: 250 },
               {text:'Read',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var checked = rowdata.permission == 1?"checked":"";
                var radio = "<input type='radio' name='"+rowdata.id+"' onclick='checkedX(this);' value='1' " +checked+ "/>";
                return radio;
            }},
            {text:'Write',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
            var checked = rowdata.permission == 2?"checked":"";
                var radio = "<input type='radio' name='"+rowdata.id+"' onclick='checkedX(this);'  value='2' " +checked+ "/>";
                return radio;
            }},
            {text:'Read/Write',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
            var checked = rowdata.permission == 3?"checked":"";
                var radio = "<input type='radio' name='"+rowdata.id+"' onclick='checkedX(this);'  value='3' " +checked+ "/>";
                return radio;
            }}
               ]
            });           

            
        });
        
        function checkedX(element){
                debugger
               var $this = $(element);
               var roleid = $this.attr("name");
                var filteredData = data.filter(function(item){
                    return item.id == roleid * 1;
                });
                if(filteredData && filteredData.length>0){
                    var item = filteredData[0];
                    item.permission = $this.val()*1;
                }
                $("#grid").jqxGrid('updatebounddata');
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<div id="grid"></div>

​