【支持单元格中渲染成select】
重点属性:cellEdit : true
```c
$("#grid_table_name").jqGrid({
datatype: "local",
data:data,
autowidth: true,
shrinkToFit: true,
rowNum: 10, // 行数
rownumbers: true,
cellEdit:true, // 支持渲染
editable:true,
rowList: [10], // 每页最大显示数
scrollOffset : 0,
colModel: [{
// label
}]
pager: "#grid_page",
viewrecords: true,
hidegrid: false,
loadComplete:function (){
// 加载完成后触发事件
}
1. 实现页面初始化时自动双击单元格进行渲染
```c
`$("##grid_table_name").editRow(rowId,true);
- 点击单元格获取行ID
$("#grid_table_name").on("click", 'tr[role="row"]', function () {
var _thas = $(this)
var grid = _thas.context;
var id = grid.id;
})
- tb渲染成select具体写法
详解:edittype 为选择渲染的类型,formatter会在表格初始化时进行遍历,可单独写事件进行触发
value为选项值 {key,value},type为出发类型,选中后alert(val) == alert(key);
{ label: '下拉框',name : "labelName",index: 'labelName',align:"center", width:80,
formatter: 'select', editable:true, edittype: 'select',
editoptions: {
value: "0:测试0;1:测试1;2:测试2;3:测试3",
dataEvents:[
{
type:'change',
fn:function(e){
var val = this.value;
alert(val);
}
}
]
}
},
- 将单元格内容渲染成按钮,超链接等
{ label: '超链接', name: 'labelName', index: 'labelName', width: 300, sortable: false,
formatter: function (cellvalue, options, rowObject){
var cellVal = cellvalue == null ? "" : cellvalue;
var enclosureName = cellVal;
var rowObjectId = rowObject.CHILD_ID;
var path = grid_data[rowObjectId]["FILE_PATH"];
return "<a href='" + $("#URL") + "xxx/xxx/xxx?id=" + id + "&path=" + path + "'>" + enclosureName + "</a>";
}
},
- 清空元数据及重新加载元数据
// 清空元数据
$('#grid_table_name').jqGrid("clearGridData");
// 重新加载数据
$('#grid_table_name').jqGrid('setGridParam', {
data:date, //加载参数
}).trigger("reloadGrid");
- 校验单元格数据大小并变色
{ label: '字体变色',name: 'labelName', index: 'labelName', width: 100, sortable: false, cellattr: addCellAttr},
function addCellAttr(rowId, val, rawObject, cm, rdata) {
if ((rawObject.labelName.*1) > 10) {
return "style='color:red'";
}
}
- layer.open 监听子页面关闭
end : function() {
// 关闭时触发的事件
}