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
});
25.datebox日历控件
<input id="dd" class="easyui-datebox" required="true"></input>
$('#dd').datebox('disable');日期不可更改
$('#dd').datebox('enable');日期可更改
26.required="true"不能为空（文本框，下拉别表框）
27.datetimebox时间控件
<input class="easyui-datetimebox" name="birthday" required="true" value="3/4/2010 2:3:56" style="width:150px">
28.dialog，对话框，把一层转化为一个对话框（如下）
(1)<div id="dd" title="My Dialog" style="width:400px;height:200px;">
    Dialog Content.
   </div>
$('#dd').dialog(options);
(2)<div id="d2" class="easyui-dialog" title="Another Dialog" style="省略" toolbar="#dlg-toolbar" buttons="#dlg-buttons" resizable="true">
   </div>
toolbar属性还是上面写入按钮(在这里是把一个层放到了这个位置，该层有按钮)
buttons类似，其都是超链接应用了easyui的样式变成按钮
29.dialog('close')，关闭对话框的方法（如下是为对话框添加一个关闭按钮）
buttons:[{
  text:'Cancel',
  handler:function(){
    $('#dd').dialog('close');
  }
}]
29.dialog('open');打开对话框的方法
$('#dd').dialog('open');
30.draggable可拖拽的层
$('#mydd').draggable();
31.onStartDrag
当目标对象开始拖动的时候触发此事件
32.axis
定义可以向哪个方向拖动，有v和h两种值
如果设为v就只能垂直拖动，如果设为h，则只能水平拖动
$('#dd2').draggable({axis:null,handle:'#title'});
33.handle
定义可以拖动的选择器对象（默认为层本身）
34.disabled（ 定义是否可以拖动，true为停止拖动）
启动移动$('#dd1').draggable({disabled:false,edge:5});
关闭移动$('#dd1').draggable({disabled:true});
35.限定范围


(layout在div或者body标签加上class="easyui-layout")↓
36.region
定义布局面板的位置，该值是下列之一: north, south, east, west, center
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">  
<div region="north" title="North Title" split="true" style="height:100px;">
</div>   
<div region="south" title="South Title" split="true" style="height:100px;">
</div>   
<div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;">
</div>   
<div region="west" split="true"title="West"style="width:100px;">
</div> <div region="center" title="center title"style="padding:5px;background:#eee;">
</div> 
  
</div> 
37.border
如果为ture则显示布局面板的边框
38.split
如果为ture则显示分隔栏，用户可以用它来改变布局面板的大小
39.href
从远程地址加载数据的URL


ValidateBox
40.invalidMessage
当文本框内容不合法时提示的文本信息


41.pagination
是否显示底部分页工具栏
42.pageNumber
当设置分页工具属性，初始化页码
43.pageSize
当设置分页工具属性，初始化页面大小