4月22日--EasyUIについて

最近、プロジェクトの中でJQuery EasyUI DataGridを使って、表の実現をカプセル化しました。多くの便利を提供しています。（PS：私はspring MVCフレームとvelocityを使っています。） 
  ここで簡単にvelocityを説明します。velocityはjavaの1種のページのテンプレートのエンジンに基づいて、〓〓のelse〓〓foreachなどの書き方のフロント・ファイルを支持します。link.co ntxtPathは、このエンジンがサポートするデフォルトの書き方であり、アプリケーションの実行ルートを取得することができます。
Velocityはjavaベースのテンプレートエンジンです。誰でも簡単にテンプレート言語を使用してjavaコードによって定義されたオブジェクトを参照することができます。Velocityがウェブ開発に応用されると、インターフェース設計者はjavaプログラム開発者と一緒にMVCアーキテクチャに準拠したウェブサイトを開発できます。つまり、ページ設計者はページの表示効果だけに注目して、javaプログラム開発者が業務ロジックコードに注目しています。Velocityはjavaコードをウェブページから分離して、ウェブサイトの長期メンテナンスに便利を提供しています。また、JSPとPHP以外にオプションの方案を提供してくれました。Velocityの能力はウェブサイト開発のこの領域に限らず、例えば、SQLとPostScript、XMLをテンプレートから生成しても良いし、独立したツールとしてソースコードとレポートを生成したり、他のシステムの集積コンポーネントとして使用しても良い。Velocityは、Turbine web開発アーキテクチャにテンプレートサービスを提供することもできる。Velocity+Turbineはテンプレートサービスを提供する方式で、ウェブアプリケーションを真にMVCモデルで開発することができます。
 
はい、Velocityは今日の重点ではなく、次にeasyUIを開始します。
1、データの抽出と表示
 

    ##   

        <div id="searchAccountBar" style="padding:5px;height:auto">
            <form action="/dcs/yng/finance/all_account_balance/list.do" method="post" id="accountSearchForm">
                <table>
                    <tr>
                        <td class="align-right">     ：</td>
                        <td>
                            <input class="text-input small-input" type="text" id="agentCode" name="agentCode"
                                   value="$!{bo.agentCode}"/>
                        </td>
                        <td class="align-right">     ：</td>
                        <td>
                            <input class="text-input small-input" type="text" id="agentName" name="agentName"
                                   value="$!bo.agentName"/>
                        </td>
                    <tr>
                            <button type="button" id="search">  </button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

 上は私達の普通の検索欄のコードで、下のこのコード、tableデータの展示で、easuyuiは多くのパッケージの良い属性があって、とても便利で、私達は自分の需要によって属性を組み合わせることができます。
 
 

<table id="accountSearchTable" class="easyui-datagrid" title="" style="height:500px" data-options="rownumbers:true, singleSelect:true, ##   url:'/dcs/yng/finance/all_account_balance/list_json.do', ##   toolbar:'#searchAccountBar'" ##       pagination="true" ##   rownumbers="true" showFooter="true" fitColumns="false"> <thead data-options="frozen:true"> ##   <tr> <th data-options="field:'agentName',width:225,align:'center'">     </th> </tr> </thead> <thead> <tr> <th data-options="field:'agentCode',width:70,align:'center'">     </th> <th data-options="field:'agentName',width:72,align:'center'" formatter="formatPrice">     </th> </tr> </thead> </table>

 ここのurlは、リンクを要求します。前の検索欄で検索ボタンをクリックすると、私の下のjsのクリックイベントがトリガされます。その後、easuyuiは私達が配合した属性によって、検索欄のパラメータをurlを通して楽屋に送ります。
 
 

$("#search_account_btn_json").click(function () {
            $('#accountSearchTable').datagrid('load', {
                agentCode:$('#agentCode').val(),
                agentName:$('#agentName').val()
            });
        });

 easuyuiのDataGridは、urlを通じてデータを取得します。取得したデータがJsonの文字列なら戻ってきます。JSON文字列は、DataGridで定義されたデータ形式で綴り合わせなければなりません。特に、JSON文字列の中のtotalドメインの値はデータの本数であり、データの改ページに用いられる。

@RequestMapping("/dcs/yng/finance/all_account_balance/list_json")  
  public @ResponseBody
    JSONObject listJson(AgentAccountBO bo,Integer page, Integer rows, Model model, HttpServletRequest request, HttpServletResponse response) {

        JSONObject json = new JSONObject();
        
        List<AgentAccountBO> list = agentAccountYNGService.query(bo);
        
        
        JsonBinder binder = JsonBinder.buildNonNullBinder();
        String beanString = binder.toJson(list);

        json.put("rows", (null != list && !list.isEmpty())?beanString:"");
        json.put("total", list.size());
      

        return json;
    }

 上記のコードは、リストデータをDataGridで定義されたデータフォーマットに綴り、データの改ページはフロントの改ページとバックの改ページ、フロントの改ページ、DataGridはすでに封入されました。DataGridは2つのパラメータを定義しています。rows（各ページの本数）、page（現在のページ数）は、それぞれ属性PageSize、pageNumberに対応しています。ユーザは、PageSize、pageNumber属性に設定しても良いし、設定しなくてもいいので、デフォルトの値を取ります。データを取得すると、DataGridが更新され、バックグラウンドデータがテーブルに表示されます。