jqGrid禁用title属性的实现
2018-06-21 本文已影响0人
小人物的秘密花园
概述
最近项目中使用到jqGrid
表格插件来呈现数据,想要自定义提示效果,并且禁用默认的title
;
实现
实现方法
- 使用jqGrid的事件
gridComplete
(当表格所有数据都加载完成而且其他的处理也都完成时触发此事件); - 查找行
$('#jqGrid').find('tbody tr.jqgrow')
; - 查找me一行下的‘td’;
- 将每一个
td
元素的title
属性置为空;
代码
<table id="jqGrid"></table>
<!-- 分页 -->
<div id="jqGridPager"></div>
// 表格初始化
function _initTable() {
$("#jqGrid").jqGrid({
url: '',// 服务器请求地址
mtype: "",// 请求方法 get || post
datatype: "json",// 数据格式
colModel: [// 列对象配置
{
label: '操作',
name: '',
formatter: function(cellValue, options, cellObject) {
return "<span onclick='addRow'><i class='fa fa-plus' aria-hidden='true'></i></span><span onclick='deleteRow'><i class='fa fa-minus' aria-hidden='true'></i></span>";
}
},
{
label: '规格1',
name: '',
editable: true
},
{
label: '规格2',
name: '',
editable: true
},
{
label: '规格3',
name: '',
editable: true
},
{
label: '库存量',
name: '',
editable: true
},
{
label: '价格',
name: '',
editable: true
},
{
label: '上下架',
name: '',
editable: true
},
{
label: '操作',
name: '',
formatter: function(cellValue, options, cellObject) {
return "<span onclick='dropOff'>下架</span>";
}
}
],
gridComplete: function() {
var aTr = $('#jqGrid').find('tbody tr.jqgrow');
for (var i = 0; i < aTr.length; i++) {
var item = $(aTr[i]).children();
for (var j = 0; j < item.length; j++) {
$(item[j]).attr('title', '')
}
}
},
viewrecords: true,// 显示总条数
height: 600,
rownumbers: true,// 显示行号
rowNum: 10,// 每页数据条数
rowList: [10, 30, 50, 80, 100],// 数据条数集合
jsonReader: { // 后台分页参数的名字
root: "row", // 表格数据
page: "page", // 页码
total: "total", // 总页数
records: "count", // 总条数
repeatitems: false,
},
pager: "#jqGridPager",// 分页
autowidth: true,
hoverrows: true,
});
}