为啥滚动网格中的 jqxgrid 未选中复选框或单选按钮列？
Posted
技术标签:
【中文标题】为啥滚动网格中的 jqxgrid 未选中复选框或单选按钮列？【英文标题】：why jqxgrid unchecked checkbox or radiobutton column in scroll grid?为什么滚动网格中的 jqxgrid 未选中复选框或单选按钮列？ 【发布时间】：2018-06-06 16:50:29 【问题描述】：我使用jqxwidgets网格（jqxgrid）是radiobutton的渲染器列，并通过rowdata值检查true或false，当检查多个无线电和滚动网格时，未经检查的选中的单选按钮（更改状态）。
cellsrenderer:function(,,rowdata)
var radio = '<input type="radio" ' + rowdata.HasPermission?"checked":"" + '/>';
return radio;
编辑： 请在 sn-p 下面运行并检查许多收音机，然后滚动网格，您会看到未选中的旧收音机已选中。
$(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>【问题讨论】：
最好提供小提琴或提供更多代码 例如，我有一个由 100 条记录组成的网格，其中三列是单选的，与权限（读、写、读/写）相同，当检查了网格的某些单选并在滚动网格后滚动时取消选中所有已检查无线电，但第一个负载网格已检查的无线电除外。在滚动网格单元格中，渲染器调用并更改收音机检查为旧状态。 你可以看到，你可以试试，我只能想象。我希望我有超自然的力量来修复你的代码 我为问题添加了一个示例代码，请选中收音机，然后向下或向上滚动网格，您会看到未选中的旧收音机被选中，例如请检查“Role1”的“读取”收音机，然后向下滚动向上滚动，您会看到经过运行检查的 Role1 Read 收音机。 1. jqxgrid 还不支持广播 btn。 2. 很难创建可编辑的列，因为当你向下滚动时，jqxgrid 总是重新创建 dom（奇怪）。 3. 唯一的示例单选按钮很奇怪，您可以在这里查看jqwidgets.com/community/topic/radion-button-inside-jqxgrid/… 4. 可能的方法是：第一种方法。用 2 个复选框写入和读取替换您的单选按钮（如果两者都选中 = R+W）。第二种方式。用调用模态表单的按钮替换单选，第三种方式，迁移到其他库，如数据表，在我的主观意见中，与 jqxgrid 相比更自定义 【参考方案1】：我找到了解决问题的方法。坦克。
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>【讨论】：
以上是关于为啥滚动网格中的 jqxgrid 未选中复选框或单选按钮列？的主要内容，如果未能解决你的问题，请参考以下文章
滚动后未选中 ListView 适配器中的 Android 复选框