easyui 知识点

1、数据表格（DataGrid）

1.1 添加子网格数据

如下效果：

使用方法：省略了 HTML 和 JS 的基本结构

<!-- 除了引入 easyui 必要的 js 和 css 以外，还需引入支持子网络数据的 js，如下： -->
<script type="text/javascript" src="/easyui/datagrid-detailview.js"></script>

<!-- 创建 easyui 数据表 DataGrid -->
<table id="tb_imgUpload_sip"></table>

/* 以下为 js 代码 */
$('#tb_imgUpload_sip').datagrid({
    /* 省略 DataGrid 配置 */
    
    /* 显示表格子网络需要设置视图*/
    view: detailview,
    /* 
    * 用于设置子网络表格，子网络表格需要使用字符串拼接 + 动态数据的形式
    * 	rowIndex: 主表的行索引
    * 	rowData： 主表的行数据，包括主表所有字段的数据（隐藏域字段也包括）
    */
    detailFormatter: function (rowIndex, rowData) {
        return "<img src=" + rowData.imgUrl + " style='width:150px;height:150px;'>";
    }
});

---

1.2 格式化数据表单元格

如上图中的进入条等

可以使用 DataGrid 中的 formatter 列属性，具体用法如下：

/* 
* 单元格formatter(格式化器)函数，带3个参数：
* 	value：字段值
* 	row：行记录数据
* 	index: 行索引
* 用法：根据需求处理该单元格数据，并返回到单元格进行显示
* 	   return 的值可以是普通值（number、string ...），也可以是由 HTML 拼成的字符串，并按照 HTML 进行解析
*      显示，如上图中的进度条
*/
$('#dg').datagrid({
    columns:[[
        {field:'userId',title:'User', width:80,
            formatter: function(value,row,index){
                if (row.user){
                    return row.user.name;
                } else {
                    return "<img src='" + row.url + "'/>"
                }
            }
        }
    ]]
});

---

1.3 编辑模式

如下效果：双击单元格可以进行输入、编辑、选择等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ny1tfzA3-1583335216311)(C:\Users\BigBox\AppData\Roaming\Typora\typora-user-images\image-20200304225320311.png)]

使用方法：

var dg_saleAttrValue_ssap = $('#dg_saleAttrValue_ssap').datagrid({
    title: "销售属性值列表",
    singleSelect: true,
    height: 310,
    columns: [[
        {field: 'id', title: '销售属性值ID', width: '30%'},
        {field: 'saleAttrValueName', title: '销售属性值名称', width: '70%', 
         /*
         * 给需要的列添加编辑器，该实例中编辑使用的是“验证框 validatebox”组件
         *     type：字符串，该编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,
         *           datebox,combobox,combotree
         *     options：对象，object, 该编辑器属性对应于编辑类型，用户设置 type 中指明的组件属性，不是表格
         *           的属性
         */
            editor: {
                type: 'validatebox', options: {required: true, missingMessage: '请输入销售属性值名称！'}
            }
        }
    ]],
    /* 单元格双击事件 */
    onDblClickCell: function (index) {
        // 当双击后激活编辑器，使用的就是 type 设置的组件，可以指定其他触发事件
        dg_saleAttrValue_ssap.datagrid("beginEdit", index);

        /*
        * 设定当失去焦点时,退出编辑状态，“input.datagrid-editable-input” 指的是编辑器的类型和类选择器
        * 	on：触发指定的事件 —— Jquery 方法
        * 	blur：失去焦点时触发 —— Jquery 方法
        * 	endEdit：结束编辑模式
        */
        $("input.datagrid-editable-input").on("blur", function () {
            dg_saleAttrValue_ssap.datagrid('endEdit', index);
        });
    }
});

---

1.4 根据数据查找对应的行

若使用 getRowIndex 方法获取 index 索引有两种方法

• 可以传入一个 row 行记录，进行查找

• 可以传入一个　ID字段值进行查找，但是必须将查找的列设为 ID字段，方法是使用 idField 属性设置那个字段为 ID字段，如下：

  var tb_asleAttr_sip = $('#tb_asleAttr_sip').datagrid({
      idField: 'saleAttrId',  //标识行的主键  可以利用getRowIndex进行查询
      columns: [[
          {field: 'saleAttrId', title: '销售属性ID', width: '15%'},
          {field: 'saleAttrName', title: '销售属性名称', width: '20%'},
          {field: 'spuSaleAttrValueList', title: '销售属性值暂存', width: '65%'}
      ]]
  });
  

---