jqGrid多复选框自定义编辑类型解决方案
对于那些试图理解jqGrid自定义编辑类型的人 我创建了一个多复选框表单元素,并想与大家分享。这是使用版本3.6.4构建的。如果有人有更有效的解决方案,请把它传下去 在colModel中,相应的编辑字段如下所示:jqGrid多复选框自定义编辑类型解决方案,jqgrid,multi-select,checkboxlist,Jqgrid,Multi Select,Checkboxlist,对于那些试图理解jqGrid自定义编辑类型的人 我创建了一个多复选框表单元素,并想与大家分享。这是使用版本3.6.4构建的。如果有人有更有效的解决方案,请把它传下去 在colModel中,相应的编辑字段如下所示: edittype:'custom' editoptions:{ custom_element:MultiCheckElem, custom_value:MultiCheckVal, list:'Check1,Check2,Check3,Check4' } 以下是javascript函
edittype:'custom'
editoptions:{ custom_element:MultiCheckElem, custom_value:MultiCheckVal, list:'Check1,Check2,Check3,Check4' }
以下是javascript函数(顺便说一句,当复选框列表位于DIV块中时,它也可以工作(经过一些修改):
//--------------------
//说明:
//MultiCheckElem是“custom_元素”函数,用于构建自定义多复选框输入
//元素。从我收集的信息来看,jqGrid在表单第一次启动时就调用了这个函数。之后
//也就是说,只调用“custom_value”函数。
//
//复选框的完整列表位于jqGrid“editoptions”部分的“list”标记(在选项中
//参数)。
//————————————————————
函数多复选框(值、选项)
{
//———-
//对于列表中的每个复选框
//构建输入元素
//设置初始“已检查”状态
//结束
//———-
var-ctl='';
var ckboxAry=options.list.split(',');
用于(ckboxAry中的变量i)
{
var项目=ckboxAry[i];
ctl+=''+项目+'
';
}
ctl=ctl.replace(/
$/,“”);
返回ctl;
}
//————————————————————
//说明:
//MultiCheckVal是自定义多复选框输入元素的“自定义值”函数。信息技术
//似乎jqGrid在第一次提交表单时调用了此函数,而其余的
//启动表单(action=set)和提交表单(action=get)的时间。
//————————————————————
函数MultiCheckVal(元素、动作、值)
{
var项目=“”;
if(action='get')//表单已提交
{
//———-
//对于每个输入元素
//如果选中,则将其添加到项目列表中
//结束
//———-
用于(要素中的变量i)
{
if(elem[i]。标记名='INPUT'&&elem[i]。选中)
items+=elem[i].值+',';
}
//项包含一个逗号分隔的列表,该列表作为元素的结果返回
项目=项目。替换(/,$/,'');
}
否则//表单将启动
{
//———-
//对于每个输入元素
//根据输入值,设置检查状态
//结束
//———-
用于(要素中的变量i)
{
if(元素[i]。标记名=='INPUT')
{
if(val.indexOf(elem[i].value+'|')=-1)
元素[i]。选中=假;
其他的
元素[i]。选中=真;
}
}//结束
}
退货项目;
}
您能否澄清您是如何传入所选值的。这是什么:val.indexOf(elem[i].value+'|')doing???@ooo-jqGrid用打开编辑的单元格的内容填充“value”参数。在本例中,单元格包含以管道分隔的选定项列表(存储在我的数据库中)。在MultiCheckVal中,您引用的代码检查“elem”中的每个输入标记,以查看其内容是否在管道分隔的单元格内容中(传入“val”)。希望这有帮助。
//————————————————————
// Description:
// MultiCheckElem is the "custom_element" function that builds the custom multiple check box input
// element. From what I have gathered, jqGrid calls this the first time the form is launched. After
// that, only the "custom_value" function is called.
//
// The full list of checkboxes is in the jqGrid "editoptions" section "list" tag (in the options
// parameter).
//————————————————————
function MultiCheckElem( value, options )
{
//———-
// for each checkbox in the list
// build the input element
// set the initial "checked" status
// endfor
//———-
var ctl = '';
var ckboxAry = options.list.split(',');
for ( var i in ckboxAry )
{
var item = ckboxAry[i];
ctl += '<input type="checkbox" ';
if ( value.indexOf(item + '|') != -1 )
ctl += 'checked="checked" ';
ctl += 'value="' + item + '"> ' + item + '</input><br /> ';
}
ctl = ctl.replace( /<br /> $/, '' );
return ctl;
}
//————————————————————
// Description:
// MultiCheckVal is the "custom_value" function for the custom multiple check box input element. It
// appears that jqGrid invokes this function the first time the form is submitted and, the rest of
// the time, when the form is launched (action = set) and when it is submitted (action = 'get').
//————————————————————
function MultiCheckVal(elem, action, val)
{
var items = '';
if (action == 'get') // the form has been submitted
{
//———-
// for each input element
// if it's checked, add it to the list of items
// endfor
//———-
for (var i in elem)
{
if (elem[i].tagName == 'INPUT' && elem[i].checked )
items += elem[i].value + ',';
}
// items contains a comma delimited list that is returned as the result of the element
items = items.replace(/,$/, '');
}
else // the form is launched
{
//———-
// for each input element
// based on the input value, set the checked status
// endfor
//———-
for (var i in elem)
{
if (elem[i].tagName == 'INPUT')
{
if (val.indexOf(elem[i].value + '|') == -1)
elem[i].checked = false;
else
elem[i].checked = true;
}
} // endfor
}
return items;
}