美文网首页jqGrid插件学习笔记
jqGrid禁用title属性的实现

jqGrid禁用title属性的实现

作者: 小人物的秘密花园 | 来源:发表于2018-06-21 17:13 被阅读0次

    概述

    最近项目中使用到jqGrid表格插件来呈现数据,想要自定义提示效果,并且禁用默认的title

    实现

    实现方法

    1. 使用jqGrid的事件gridComplete(当表格所有数据都加载完成而且其他的处理也都完成时触发此事件);
    2. 查找行$('#jqGrid').find('tbody tr.jqgrow');
    3. 查找me一行下的‘td’;
    4. 将每一个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,
          });
      }
    

    相关文章

      网友评论

        本文标题:jqGrid禁用title属性的实现

        本文链接:https://www.haomeiwen.com/subject/hulcyftx.html