jqGrid表格下拉框

【支持单元格中渲染成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);
  1. 点击单元格获取行ID
$("#grid_table_name").on("click", 'tr[role="row"]', function () { 
            var _thas = $(this)
            var grid = _thas.context;
            var id = grid.id;
    })
  1. 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);
            		}
       			}
        	]
		}
	},
  1. 将单元格内容渲染成按钮,超链接等
{ 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>";
		}
	},
  1. 清空元数据及重新加载元数据
// 清空元数据
$('#grid_table_name').jqGrid("clearGridData");
// 重新加载数据
$('#grid_table_name').jqGrid('setGridParam', { 
	data:date, //加载参数
}).trigger("reloadGrid");
  1. 校验单元格数据大小并变色
{ 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'";
        }
    }
  1. layer.open 监听子页面关闭
end : function() { 
      	// 关闭时触发的事件
	}
    原文作者:m0_52475208
    原文地址: https://blog.csdn.net/m0_52475208/article/details/124739427
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞