- JqGrid 的列属性见链接:http://www.qinbin.me/jquery-colmodel-property-description
- editType是列的编辑属性,可为text、textarea,select、checkbox、password、button、image、file等。
3、一般在一列中只能设置一种编辑属性,这里介绍的是动态修改列属性,使用户在点击单元格 时,在一列出 现不同的编辑属性
4、解决思路:
使用onCellSelect方法:在点击单元格时,保存上一行的值,然后根据不同需求设置单元格的 列属性
定义变量:varpreCellID;
onCellSelect :function(id){xs
$(this).saveRow(preCellID,true);//保存上一行的值
if(id&&id!=preCellID){ preCellID=id }//将当前行赋值给preCellID
//下面就是根据需求动态改变单元格的editType属性
// 可以根据id获得行的值,然后根据这一行的某个值判断应该显示什么编辑属性
// 假设这个值是strType,设置的列名是:paranValue
if(strType==1){ //代表这一行显示下拉框 select
$("#editGrid").setColProp("paranValue",{
editType:select,
editOptions:getSelectvalue(条件),//根据条件动态获取下拉框的值
}) ;
$(this).editRow(id,true) ;//这个设置是使行进入编辑状态,与前面 // 的 $(this).saveRow(preCellID,true)对应,
}if(strType==2){
$("#editGrid").setColProp("paranValue",{
editTYpe:checkbox,
editOptions:{value:“ON:OFF”},
formatter:"text" //以文本形式显示,即显示在界面上的值是ON或OFF
}
$(this).editRow(id,true)
} if(strType==3){ //在editType为text的情况下,添加时间控件datetimepiker
$("#editGrid").setColProp("paranValue",{
editType:text,
formatter:"text"
}
$(this).editRow(id,true,functionpickdates(id){
jQuery("#"+id+"_paramValue","editGrid").datetimepiker({
dateFormate:"yy-mm-dd",//格式化日期
timeFormate:"HH:mm:ss"//格式化时间
})
})
}if(strType==4){ //在editType为text的情况下,添加数字控件spinner
$("#editGrid").setColProp("paranValue",{
editType:text,
formatter:"text"
}
$(this).editRow(id,true,functionSpinner(id){
jQuery("#"+id+"_paramValue","editGrid").spinner({
})
//这里只选了 时间控件和数字控件做例子,对于JQuery控件,以type=text的控件, 都可以用上述方法嵌套在jqGrid表格的单元格中
})
1、如果需要在JqGrid单元格显示编辑模式为password,button,textarea,也是以同样的方式, 修改列的editType;(上一节介绍的是我自己需要的几种编辑模式,也是比较常用的几种编辑 模式)
2、在保存数据也有很重要的一点:
为了确保数据能够保存到界面,最好在保存数据前,将formatter:"text"即:
$("editGrid").setColProp("paramValue(列名)",{formatter:"text"})
//这里主要是在动态改变editType时,在设置下拉框时,formatter:select,在使用saveRow //会出现数据不能保存到界面的情况,这解决了下拉框值在特定情况下不能保存的问题
3、点击表格第一列的checkbox时,会触发onCellSelect事件,这样在这个事件中的处理会使 editype为select,checkbox的值处于编辑模式,并会保存值到界面,为了使用户看不到这中间 的变化,在onselectRow方法中做处理
onSelectRow: function(id){
$("editGrid").setColProp("paramValue(列名)",{formatter:"text"}) ;
jQuery("editGrid").jqgrid("restoreRow",preCellID);
}
//1、在点击第一列的checkbox,先触发onCellSelect事件,再触发onSelectRow事件
//2、restoreRow方法是数据恢复到以前的值,这个方法刚好可以使上述编辑类型的值恢复到
//
以
前的值,即在
没有值的情况下,显示为空,有值则显示原值