我使用radiobutton的渲染器列使用JQXWidgets Grid(JQXGRID)，并通过rowdata值检查了True或false，当检查了多个 radio 和滚动网格时，未选中的已检查 radio 按钮(更改状态)。
> >cellsrenderer:function(,,rowdata){
var radio = '<input type="radio" ' + rowdata.HasPermission?"checked":"" + '/>';
return radio;
}
编辑: 请在代码段下方运行并检查许多 radio 然后滚动网格，您会看到未检查的旧 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>最佳答案
我找到了解决问题的方法。坦克。
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>关于javascript - 为什么 jqxgrid 在滚动网格中未选中复选框或单选按钮列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47968514/