使列成为复选框 [英] Make a column be a checkbox
问题描述
我加载一个数据库请求的网格（在PHP中使用CodeIgniter abd jqgrid helper）。我没有任何问题显示一个漂亮的网格与我的数据。
我想显示一个新的colomn与复选框为了选择一行或几行。 p>
加载后不可能添加新列。所以我试着这样做：
- 创建网格时添加colomn，
- 在创建时，我添加一个'loadComplete'选项与一个函数，
- 在diplaying ，则执行该函数。这是：
function ajoutCheckBox（）{
var grille = $（＃users_grid）;
//配置文件复选框dans la colonne D
grille.setColProp（'Dest'，{editable：true}）;
grille.setColProp（'Dest'，{edittype：'checkbox'}）;
grille.setColProp（'Dest'，{editoptions：{value：True：False}}）;
grille.setColProp（'Dest'，{formatter：checkbox}）;
grille.setColProp（'Dest'，{formatoptions：{disabled：true}}）;
//保险费$ d
var index = grille.jqGrid（'getGridParam'，'_index'）;
for（i in index）{
grille.jqGrid（'setCell'，i，'Dest'，'False'，{}）;
}
}
正如你所看到的，gris被称为
我的问题：没有追加...
谢谢您的帮助！
XB
编辑：
我找到以下解决方案：
- 复选框的列在colModel语句中添加，
- 要初始化值并激活复选框strong>他们在创建时已停用！），我使用
loadComplete回调函数。
代码很简单，但很难找到...
网格创建：
loadComplete：function（）{ajoutCheckBox（）}，
colModel：[.... {name：Env，index ：Env，width：30，hidden：false，align：left，edittype：checkbox，formatter：checkbox，formatoptions： }，editable：true，editoptions：{editoptions：{value：\True：False\，defaultValue：\False\}} }}，....]
回调函数：
function ajoutCheckBox（）{
var grille = $（＃users_grid）;
var index = grille.jqGrid（'getGridParam'，'_index'）;
for（i in index）{//在表单中添加
grille.jqGrid（'setCell'，i，'Env'，'False'）;
$（'＃'+ i）.find（input：checkbox）removeAttr（'disabled'）;
}
}
似乎没有优化， ！
加载后添加新列并不是不可能，但可以隐藏列。你只需要定义列的复选框（你可以使用 formatoptions：{disabled：false} 如果需要），你可以使用 showCol 在里面loadComplete 回调，使列可见，如果需要或强制使用 hideCol 方法隐藏。
UPDATED ：如果我正确理解了您想要的内容（在评论中讨论之后），则 演示 应显示解决方案：
- 演示将根据输入数据（基于每行的布尔值）创建包含复选框的列。完整的输入数据将由内部参数
data和_index中的jqGrid自动保存。将显示包含数据的第一页。 - 演示使用
beforeSelectRow来处理复选框的点击/检查/取消选中。因为在jqGrid中使用了datatype：local我使用getLocalRow访问内部对象，行。在检查/取消选中复选框时，我修改了数据的相应字段。因此，可以更改某些复选框的状态，更改页面并返回第一页。
以下是代码最重要的部分：
var mydata = [
...
{id：4，.. 。，closed：true，...}，
....
];
$（＃list）。jqGrid（{
datatype：local，
data：mydata，
colModel：[
.. 。
{name：closed，width：70，align：center，
formatter：checkbox，formatoptions：{disabled：false}，
edittype： editoptions：{value：Yes：No，defaultValue：Yes}，
stype：select，searchoptions：{sopt：[eq，ne]，
value： ：Any; true：Yes; false：No}}，
...
]，
beforeSelectRow：function（rowid，e）{
var $ self = $ this），
iCol = $ .jgrid.getCellIndex（$（e.target）.closest（td）[0]），
cm = $ self.jqGrid（getGridParam，colModel ），
localData = $ self.jqGrid（getLocalRow，rowid）;
if（cm [iCol] .name ===closed）{
localData.closed = $ （e.target）.is（：checked）;
}
return true; //允许选择
}，
。
}）;
I load a grid with a database request (in PHP with CodeIgniter abd jqgrid helper). I haven't any issue to display a nice grid with my datas.
I want to display a new colomn with checkboxes in order to choose one or several rows.
It's impossible to add a new column after loading. So I'm try to do like this : - The colomn is added when creating the grid, - At creating, i add a 'loadComplete' option with a function, - At diplaying, the function is executed. Here it is :
function ajoutCheckBox() {
var grille = $("#users_grid");
// Construire les checkbox dans la colonne D
grille.setColProp('Dest', {editable: true});
grille.setColProp('Dest', {edittype: 'checkbox'});
grille.setColProp('Dest', {editoptions: { value: "True:False" }});
grille.setColProp('Dest', {formatter: "checkbox"});
grille.setColProp('Dest', {formatoptions: { disabled: true}});
// Insérer la valeur false dans toutes les lignes de la colonne D
var index = grille.jqGrid('getGridParam', '_index');
for(i in index) {
grille.jqGrid('setCell', i, 'Dest', 'False', {});
}
}
As you can see, the gris is called "#users_grid" and the column "Dest".
My issue : nothing appends...
Thank you for your help !
XB
EDIT : I found the following solution :
- Column of checkboxes is added in the colModel statement,
- To initialize the value and to activate the checkboxes (they are disabled on creating !), I use a
"loadComplete"callback function.
The code is very simple but hard for me to find...
The grid creation :
loadComplete: function() { ajoutCheckBox() },
colModel:[.... {"name":"Env","index":"Env","width":30,"hidden":false,"align":"left","edittype":"checkbox","formatter":"checkbox","formatoptions":"{ disabled: false}","editable":true,"editoptions":{"editoptions":"{ value: \"True:False\", defaultValue: \"False\" }}","size":10}}, ....]
The callback function :
function ajoutCheckBox() {
var grille = $("#users_grid");
var index = grille.jqGrid('getGridParam', '_index');
for(i in index) { // Pour toutes les lignes du tableau
grille.jqGrid('setCell', i, 'Env', 'False');
$('#'+i).find("input:checkbox").removeAttr('disabled');
}
}
It doesn't seem to be optimized but it works !
It's not impossible to add a new column after loading, but it's possible to make a hidden column visible. You need just define the column having checkbox (you can use formatoptions: { disabled: false} if it's required) and you can use showCol inside of loadComplete callback to make the column visible if required or force it be hidden using hideCol method.
UPDATED: If I correctly understand what you want (after the discussion in the comments) then the demo should demonstrate the solution:
- the demo creates column with checkboxes based on the input data (based on boolean value existing for every row). The full input data will be saved by jqGrid automatically in internal parameters
dataand_index. The first page with the data will be displayed. - the demo uses
beforeSelectRowto handle click/checking/unchecking of the checkboxs. Becausedatatype: "local"are used in jqGrid I usedgetLocalRowto access to internal object which reprecented the data of the row. On checking/unchecking of the checkboxs I modified the corresponding field of the data. As the result one can change the state of some checkboxes, change the page and come back to the first page. One will see that the modified state of checkboxs were saved.
Below are the most important part of the code:
var mydata = [
...
{ id: "4", ..., closed: true, ... },
....
];
$("#list").jqGrid({
datatype: "local",
data: mydata,
colModel: [
...
{name: "closed", width: 70, align: "center",
formatter: "checkbox", formatoptions: { disabled: false},
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"],
value: ":Any;true:Yes;false:No" } },
...
],
beforeSelectRow: function (rowid, e) {
var $self = $(this),
iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
cm = $self.jqGrid("getGridParam", "colModel"),
localData = $self.jqGrid("getLocalRow", rowid);
if (cm[iCol].name === "closed") {
localData.closed = $(e.target).is(":checked");
}
return true; // allow selection
},
...
});
这篇关于使列成为复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
