easyui笔记

1.显示一个列表引用easyui-datagrid类,fit选项如果设置为true,折叠容器的大小将填充父容器。fitColumns 设置为true,自动扩展或收缩列的大小以适应网格宽度和防止水平滚动条
<table class="easyui-datagrid" url="datagrid_data2.json" border="false" fit="true" fitColumns="true">

2.easyui区分大小写
3.field 对于json中的字段,有利于一一对应。
4.idField指定哪些字段是标识字段(既id)
5.rowStyler:(写在定义的datagrid中和columns是并列选项)
返回像'background:red'的样式,函数带两个参数:
rowIndex: 行索引,开始以0
rowData: 与此相应的记录行

6.styler(因为这个属性有value参数,所以其是写在定义的列中的。)
单元样式函数,返回自定义样式,单元样式格式'background:red',函数有三个参数:value: 字段值.rowData: 该行记录数据rowIndex:行索引.
7.sortName
定义哪一列可以排序
8.sortOrder
定义列排序的方式,递增(asc)或递减(desc)与remoteSort: false连用定义是否从服务器排序数据()默认为true,不写的话sortOrde没用
9.frozenColumns
和column属性相同,但是这些列将被固定在左边
10.checkbox
是否显示选择框
11.formatter
包含三个参数:value: 字段值.rowData: 该行记录数据rowIndex:行索引.
12.sorter
自定义字段排序函数,有两个参数:a: 第一个字段的值b: 第二个字段的值.
13.sortable
是否允许该列排序
14.toolbar:[]
在里面写入dategrid的按钮。其中'-'代表竖着的分隔符。写入的按钮显示在上边
显示在下边是buttons
15.collapsible:true,
dategrid是否有收起放下的效果
16.resize
重新定义dategrid显示的大小
17.getSelected
返回第一次选择的行记录(获取)
var selected = $('#test').datagrid('getSelected');
if (selected){
alert(selected.code+":"+selected.name+":"+selected.addr+":"
+selected.col4);
}
18.getSelections
返回所有选定行,如果没选择记录,则返回空数组
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'));
19.clearSelections
取消所有选择
20.selectRow
选择某行,行索引以0开始
$('#test').datagrid('selectRow',5);
21.{field:'ck',checkbox:true}
dategrid中定义某列是多选框,可以自动实现全选和全不选功能
22.selectRecord
通过id值选择一行
$('#test').datagrid('selectRecord','002');当然首先要是dategrid已经指定
了idfied的值对应json数据的那一列
23.unselectRow
取消选择某行(行索引以0开始)
$('#test').datagrid('unselectRow',2);
24.mergeCells
一些单元融合一些单元,选项包含以下属性:
index: 行索引。field: 字段名。rowspan: 合并的行数。colspan: 合并的列数
$('#test').datagrid('mergeCells',{
index:2,
field:'addr',
rowspan:2,
colspan:2
});
原文地址:https://www.cnblogs.com/shipeng22022/p/4614031.html