easyui-04（数据查询）

 1.DataGrid

1.1 DataGrid基本属性

   1.1.1 基本属性
   

   url : '',         // 初始化请求路径
      fitcolumns : false,     // 列宽自适应
      singleSelect : true,     // 是否选中单行
      checkOnSelect : true,     // 点击行选中时该checkbox选中或取消选中
      rownumbers:true,            // 行号
      fit : true,         // 高宽自适应
      border : false,             // 是否显示边框
      title : '书本列表',     // datagrid标题
      striped : true,             // 显示斑马线效果

   1.1.2 toobar属性（增删改）
      toolbar : "#tb",            // 自定义工具栏

   1.1.3 formatter单元格格式化
    
   1.1.4 styler单元格样式

   1.1.5 sorter
   
   1.1.6 editor

1.2 DataGrid事件
   
   1.2.1 onDblClickRow双击行事件
   onDblClickRow:function(index,row){}

   1.2.2 按钮点击查询
   //查询参数
   var param={
    'bookName':$('#bookname').val(),
    'methodName':'query'
   };
   var options = $('#dg').datagrid('options');
   //指定请求Url地址
   options.url="bookAction.action";
   //开始加载数据
   $('#dg').datagrid('load', param); 

1.3 DataGrid分页

   1.3.1 属性设置
   pagination:true,    // 是否分页
   pageNumber:1,    // 初始化页码
   pageSize:10,        // 初始化每页显示条数

   1.3.2 请求/响应参数格式要求
   Request请求：{"page":页码,"rows":每页多少条记录}
   Response响应：{"total":总记录数,"rows":[{数据项1},{数据项2},{数据项3},...]}

2.Dialog对话框窗口

width : 400,
height : 292,
modal : true,
draggable : true,
collapsible : false,
minimizable : false,
maximizable : false,
title : '编辑书本信息',
buttons:"#dlg-buttons",
href:'bookDetail.jsp',
onLoad:function(){
   //赋值
   $('#ff').form('load',row);
   //重置
   $('#ff').form('reset');
}

3.Message消息窗口

  3.1 $.messager.alert

  3.2 $.messager.confirm

4.Form表单

$('#ff').form("submit",{    
    url:'',    
    onSubmit: function(){  
       //form表单验证
       return $(this).form('validate');
    },    
    success:function(data){

    }    
});

//form表单序列化
$('#ff').serialize();
  

一、DataGrid

扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

2.用法：

创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。

案例

<table class="easyui-datagrid">  
    <thead>  
        <tr>  
            <th data-options="field:'code'">编码</th>  
            <th data-options="field:'name'">名称</th>  
            <th data-options="field:'price'">价格</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>001</td><td>名称1</td><td>2323</td>  
        </tr>  
        <tr>  
            <td>002</td><td>名称2</td><td>4612</td>  
        </tr>  
    </tbody>  
</table>  

通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。

<table class="easyui-datagrid" style="width:400px;height:250px"  
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
    <thead>  
        <tr>  
            <th data-options="field:'code',width:100">编码</th>  
            <th data-options="field:'name',width:100">名称</th>  
            <th data-options="field:'price',width:100,align:'right'">价格</th>  
        </tr>  
    </thead>  
</table>  

<table id="dg"></table>  
$('#dg').datagrid({   
    url:'datagrid_data.json',   
    columns:[[   
        {field:'code',title:'代码',width:100},   
        {field:'name',title:'名称',width:100},   
        {field:'price',title:'价格',width:100,align:'right'}   
    ]]   
});