jQuery Easyui框架整理

jQuery Easyui框架:

主要组件

Layout(布局)

1.panel(面板):承载其它内容的容器,提供了折叠、关闭、最大化、最小化和自定义行为,很容易嵌入到web页面的任何位置。

 注意:每个面板一定要设置title属性

   --class="easyui-panel"

 2.tabs(选项卡):选项卡显示一批面板。但在同一个时间只会显示一个面板。

   --class="easyui-tabs"

 3.accordion(分类):即为折叠面板,用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

  --class="easyui-accordion"

  4.layout(布局):布局容器有5个区域:北、南、东、西和中间,中间面板是必须的,边缘的面板都是可选的

Form(表单)

1.form:属性:url

    方法:submit 执行提交操作

   load 读取记录填充到表单中,数据参数可以是字符串(若为字符串则作为远程的URL)或一个对象

   clear 清除数据

   reset 重置表单数据(1.3.2)

  validate 表单字段验证,当所有字段都有效返回true,该方法使用validatebox(验证框)插件

2.validatebox(验证框):<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />  

3.combobox(下拉列表框):<input id="cc" class="easyui-combobox" name="dept"    data-options="valueField:'id',textField:'text',url:'xxx.action'" />  

Window（窗口）

1.window(窗口) 默认情况下,窗口可以移动,调整大小和关闭,它的内容也可以被定义为静态html或要么通过ajax动态加载。

  打开或关闭窗口

$('#win').window('open');  // open a window    

$('#win').window('close');  // close a window  

2. messager(消息窗口)：

（1）$.messager.show(消息窗口)

（2） $.messager.alert(警告窗口)

（3） $.messager.prompt(带确定和取消的消息窗体)

（4）  $.messager.progress(进度消息窗体)

共同属性 title：在头部面板显示的标题文本。msg：显示的消息文本。

DataGrid（数据表格）

1.DataGrid以表格形式展示数据 --class="easyui-datagrid"

$('#dg').datagrid({   

    url:'xxx.action,   

    columns:[[   

        {field:'code',title:'Code',width:100},   

        {field:'name',title:'Name',width:100},   

        {field:'price',title:'Price',width:100,align:'right'}   

    ]]   

});  

      2.toolbar：

1) 一个数组，每个工具属性都和linkbutton一样。
2) 选择器指定的工具栏。

3.属性：

分页pagination(boolean) 如果为true,则在DataGrid控件底部显示分页工具栏。

                pageList([10,20,30...]) 在设置分页属性的时候 初始化页面大小选择列表。

pageSize(number) 在设置分页属性的时候初始化页面大小。

         列属性：title列标题文本。Field 列字段名称。Formatter 单元格formatter(格式化器)函数，带3个参数：value：字段值。rowData：行记录数据。rowIndex: 行索引。

4.方法：

getSelected 返回第一个被选中的行或如果没有选中的行则返回null。

Load 加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据。

Reload 重载行。等同于'load'方法，但是它将保持在当前页。

Eg:$('#dg').datagrid('reload');    // 重新载入当前页面数据  

5. datagrid行编辑效果：

* editor属性：

* beginEdit():

* endEdit():

* cancelEdit():