EasyUI之datagrid学习Demo

1.引入必要文件

<script type="text/javascript" src="js/EasyUI/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/EasyUI/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/EasyUI/js/easyui-lang-zh_CN.js"></script>

       <link rel="stylesheet" type="text/css" href="EasyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="EasyUI/themes/icon.css">
<link rel="stylesheet" type="text/css" href="EasyUI/demo.css">

2.编写展示页面并配置

<div id="customer" class="easyui-window" title="客户信息" data-options="modal:true,closed:true,iconCls:'icon-tip',top:100" style="width:730px;height:400px;padding:10px;">
    <table id="dg" class="easyui-datagrid" title="客户信息列表" style="width:700px;height:300px" data-options="
rownumbers:false,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
    <th field="id" width="80">客户ID</th>
<th field="name" width="80">客户名称</th>
<th field="address" width="100">客户地址</th>
<!--<th field="name" width="80">客户类型</th>
<th field="amount" width="80" align="right">客户级别</th>
<th field="price" width="80" align="right">客户地址</th>
--></tr>
</thead>
</table>
 </div>

3.编写js

function showCustomers(){
         $("#dg").datagrid({
         url:'AjaxCustomerInfoAction_AjaxShowCostomerInfo.action',//数据源
         loadFilter: function(data){

                                 //自定义数据过滤器，返回的data必须包含   "total"和"rows"

                                //该过滤器可以将自定义数据转换为标准的data数据

                               //data.totalCount和data.customerinfolist获取的是自定义的数据
        if (data.totalCount&&data.customerinfolist){
            var mydata={
                                            "total":data.totalCount,
                                           "rows":data.customerinfolist                                                        
                                          }
            return mydata;
        } else {
        return data;
        } 
        },

                            //单击某一列时触发的事件
         onClickRow:function(rowIndex, rowData){
                               $('#ff').form('load',{
                                customerId:rowData.id,
                               customerInfoName:rowData.name
          });
                             $('#customer').window('close');
                },
         pageSize:5,//此处的数值必须是pageList中的数值
         pageList:[5,10,15,20,25,30]
         });
          $('#customer').window('open');
         }