easyui datagrid 的簡單實現

>引入easyui 的文件

<script type="text/javascript" src="${basePath }resource/plugin/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${basePath }resource/plugin/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${basePath }resource/plugin/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<link href="${basePath }resource/plugin/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="${basePath }resource/plugin/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" type="text/css" />

>兩個普通的table

<div>
        <div id="div_tj">
            <table id="tj" style="width: 860px;"></table>
        </div>
        <div>
            <table id="dg" style="width: 860px;"></table>
        </div>
</div>

>datagrid初始化

<script type="text/javascript">
    $(function(){
        $("#tj").datagrid({
            url:"${basePath}rest/trans/statistics",
            method:"POST",
            columns: [[
                { field: 'CURRENCY_TYPE', title: '', width: 100, align: 'right'},
                { field: 'TRANS_MONEY', title: '', width: 750, align: 'left'}
            ]],
            toolbar:[
                     {
                            text:'返回',
                         iconCls: 'icon-undo',
                       handler: function(){
                           window.location.href = "${basePath}rest/trans/index";
                       }
                     },
                     
                     {
                         text:'新增',
                         iconCls: 'icon-add',
                       handler: function(){
                           window.location.href = "${basePath}rest/trans/addInit";
                       }
                     },
                     {
                         text:'搜索',
                         iconCls: 'icon-search',
                       handler: function(){
                           var param = {
                            transNo:$("#transNo").val(),
                            currencyType:$("#currencyType").combobox("getValue"),
                            startTime:$("#startTime").datebox("getValue"),
                            endTime:$("#endTime").datebox("getValue")
                           };
                           $("#dg").datagrid("load", param);
                           $("#tj").datagrid("load", param);
                       }
                     },
                     {
                         text:'清空',
                         iconCls: 'icon-cancel',
                       handler: function(){
                           $("#form").form('clear');
                       }
                     }
                 ]
        });
        
        $("#dg").datagrid({
            url:"${basePath}rest/trans/page",
            method:"POST",
            pageSize: 1,
            pageList: [5, 10, 20, 50],
            pagination: true,
            nowrap: true,
            striped: true,
            nowrap: true,
            rownumbers: true,
            columns: [[
                       { field: 'id', checkbox: true },
                       { field: 'transNo', title: '交易流水號', width: 250, align: 'center'},
                       { field: 'currencyType', title: '幣種', width: 100, align: 'center', formatter:
                           function(value, row, index){
                               if(value == 'CNY'){
                                   return "人民幣";
                               }else if(value == 'USD'){
                                   return "美元";
                               }else if(value == 'EUR'){
                                   return "歐元";
                               }
                           }
                       },
                       { field: 'transType', title: '交易類型', width: 100, align: 'center', formatter:
                           function(value, row, index){
                               if(value == 'INCOME'){
                                   return "收入";
                               }else if(value == 'EXPENDITURE'){
                                   return "支出";
                               }
                           }                       
                       },
                       { field: 'transMoney', title: '交易金額', width: 100, align: 'center'},
                       { field: 'createTime', title: '交易時間', width: 200, align: 'center'}
             ]],
        });
    });
    </script>

>搜索條件

<div style="margin-top: 20px; margin-bottom: 10px;">
    <form id="form">
        <table>
            <tr>
                <td>交易流水號：</td>
                <td>
                    <input class="easyui-textbox" type="text" name="transNo" id="transNo"/>
                </td>
                <td>幣種：</td>
                <td>
                    <select class="easyui-combobox" name="currencyType" id="currencyType">
                        <option value="">請選擇</option>
                        <option value="CNY">人民幣</option>
                        <option value="USD">美元</option>
                        <option value="EUR">歐元</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>開始時間：</td>
                <td>
                    <input id="startTime" name="startTime" type="text" class="easyui-datebox"/>
                </td>
                <td>結束時間：</td>
                <td>
                    <input id="endTime" name="endTime" type="text" class="easyui-datebox"/>
                </td>
            </tr>
        </table>
    </form>
 </div>

>搜索

$("#dg").datagrid("load", param);

param = form元素的json串

>清空搜索條件

$("#form").form('clear');

>easyui控件怎麼取值

文本框：<input class="easyui-textbox" type="text" name="transNo" id="transNo"/>

var transNo = $("#transNo").val();

複選框：<select class="easyui-combobox" name="currencyType" id="currencyType">
                        <option value="">請選擇</option>
                        <option value="CNY">人民幣</option>
                        <option value="USD">美元</option>
                        <option value="EUR">歐元</option>
</select>

var currencyType = $("#currencyType").combobox("getValue");

日期控件：<input id="startTime" name="startTime" type="text" class="easyui-datebox"/>

var startTime = $("#endTime").datebox("getValue");  1.3.1版本返回的日期是字符，格式：yyyy-MM-dd

順便一提， 後臺分頁用的mybatis的pagehelper插件