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

der="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
当设置分页工具属性，初始化页面大小

更多相关文档:

Jquery_EasyUI学习教程

Jquery_EasyUI学习教程_计算机软件及应用_IT/计算机_专业资料。Jquery_EasyUI学习教程 教程 概述这个教程的目的是说明如何使用 easyui 框架容易的创建网页。 首先, 你...

我的jquery学习笔记整理

jquery.easyui学习笔记 2页 免费 ajax_jQuery等学习笔记 5页 免费 jQuery学习笔记二 18页 免费我​的​j​q​u​e​r​y​学​习​笔​记...

easyui学习笔记3—在展开行内的增删改操作=

easyui 学习笔记 3—在展开行内的增删改操作 这一篇介绍在一个展开行内进行的...1.先看引用的资源 ...

jquery+easyui学习文档

easyui.css"> ...jquery.easyui学习笔记 2页 免费 喜欢此文档的还喜欢 jQuery+EasyUI+1.2.4+AP... 64页 5下载券 jquery+easyui培训文档 45页 1下载券...

jQuery EasyUI 使用总结

jQuery EasyUI 使用总结_计算机软件及应用_IT/计算机_专业资料。jQuery EasyUI ...8 Easyui 深度学习 查看 easyui 解析后的页面元素为什么会提出这个问题?easyui ...

jQueryEasyUI入门

jQueryEasyUI 入门 jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合体,而 jQuery EasyUI 的目标就是帮 助 web 开发者更轻松的打造出...

jquery实战学习笔记

jquery.easyui学习笔记 2页 免费 ajax_jQuery等学习笔记 5页 免费 jQuery学习笔记...: jQuery.noConflict(); (function($) { $(function() { // 使用 $ ...

Jquery EasyUi实战教程布局篇

Jquery EasyUi实战教程布局篇_计算机软件及应用_IT/计算机_专业资料。私人做程序开发...Jquery_EasyUI学习教程 暂无评价 123页 免费 jQuery_EasyUI教程 129页 3下载券...

Jquery学习笔记

jquery.easyui学习笔记 2页 免费 Java_script_JQuery学习笔... 71页 免费如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。...

jQuery学习笔记

ajax_jQuery等学习笔记 5页 免费 jquery.easyui学习笔记 2页 免费 jQuery验证框架学习笔记 39页 1下载券 喜欢此文档的还喜欢 JQuery 学习笔记 12页 免费 Jquery学...

更多相关标签: