jquery学习笔记

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

当设置分页工具属性，初始化页面大小