LigerUIテーブルLigerGrid動的結合Struts 2取得データ

2547 ワード

JSONは軽量レベルのデータ交換フォーマットで、ほとんどの場所で便利に使用できます.Struts 2はJSONプラグインを利用することで、フロントアクセスのためにJSONデータを簡単に提供することができます.
1.準備
本稿では,struts 2フレームワークとLigerUIプラグインを構築した上で実現したが,フレームワークの構築は本稿の議論の範囲外である.以下のActionで使用するJSONクラスはalibabaのオープンソースクラスライブラリFastjsonである.
関連キット:struts 2 v 2.1.8、LigerUI v1.2.2、fastjson-1.1.9
2.アクションの作成
public class DeptAction extends ActionSupport{
    private JSONObject rows;
    public String getDepts() throws Exception{
            DeptService deptService = new DeptService();
            List depts= deptService.getDepts();
            HashMap<String, Object> maps = new HashMap<String, Object>();
            List<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
             for (Dept dept :depts) {
                  HashMap<String, Object> hashMap = new HashMap<String, Object>();
                  hashMap.put("id",dept.getId());
                  hashMap.put("name",dept.getName());
                  list.add(hashMap);
            }
            maps.put("Rows", list);
            rows = JSONObject.parseObject(JSON.toJSONString(maps));
            return SUCCESS;
    }
 
    public JSONObject getRows() {
             return rows ;
    }
 
    public void setRows(JSONObject rows) {
             this.rows = rows;
    }
}

3.Action構成
<action name="getDepts" class="com.shelwee.domain.Dept" method="getDepts" >
    <result type="json" >
        <param name="root" >rows</param>
    </result>
</action>

4.LigerGrid要求データ
Actionが作成され、構成されると、対応するページでリクエストを開始できます.要求の例:
<script type="text/javascript">
        $( function () {
            window[ 'g'] =
            $( "#maingrid").ligerGrid({
                checkbox: true,
                columns: [
                { display: '  ', name: 'id' , align: 'left', width: 140},
                { display: '  ', name: 'name' , minWidth: 60, width: 140}
                ], dataAction: 'local',pageSize:10,
                url: '/getUsers.action' ,
                width: '100%', height: '100%' 
            });
            $( "#pageloading").hide();
        });
</script>

5.効果
 
 
 
注:本文は転載する:http://www.shelwee.com/html/archives/67205.html