当前位置 : 主页 > 网页制作 > Dojo >

dojo显示列表 Grid Cell Store

来源:互联网 收集:自由互联 发布时间:2021-06-15
框架是ssi这个省略 今天先写Grid,其实就是列表。大致步骤就是 post请求,发送参数,返回data,new 一个cell,显示列表。 发送参数,和返回参数详细下一节再写。 1 结构 require([ "dojox/g

框架是ssi这个省略

今天先写Grid,其实就是列表。大致步骤就是

post请求,发送参数,返回data,new 一个cell,显示列表。

发送参数,和返回参数详细下一节再写。

1 结构

require([

                "dojox/grid/DataGrid",
                "dojo/store/Memory",
                "dojo/data/ObjectStore",
                "dojo/request",
                "dojox/grid/_CheckBoxSelector",
                "dojo/_base/lang",
                "dojo/_base/array",
                "dojox/grid/cells",
                "dojo/domReady!"
            ], function( DataGrid, Memory, ObjectStore,request,_CheckBoxSelector,lang,baseArray,gridCells){

               // code

               request.post................

});

注意:require和function里面是一一对应的,fun里面名字可以改,但是顺序不能颠倒,跟java一个道理。

2 请求

 request.post("institutionList.action",

                         {     

                               data:{变量名:数据} ,               // 传递查询参数 ,这里可以不要。下一节重点讲

                               handleAd: "json"  // json格式传递

                         }

).then(function(data){

          var datas = eval(data.result);  //result是action里面的一个变量,见下面的action方法。

          var  tempStore = new Memory({data:datas});//转换成Memory

          var  dataStore = new ObjectStore({object:tempStore});//转换成Store

         var cells = [

                               { name: "组名称", field: "institutionId", width:"350px", styles:"text-align:center;"},
                               { name: "组描述", field: "institutionName", width:"350px", styles:"text-align:center;"},
                                { name: "操作" , field:"parId", width:"192px",       styles:"text-align:center;"}

                           ]

             var gridLayout = [

                          //  这里可以添加checkbox
                        cells
                    ];

               grid = new DataGrid({
                        store: dataStore,                    //action请求获得的store
                        query: { institutionId: "*" },    //精确查询,可以不要
                        autoHeight: true,
                        structure: gridLayout         // 定义行
                    }, "grid");                          //显示位置

});


3 jsp只要这样就行,头部引入自己写

<body>
     <div id="grid"></div>
</body>


4 补充 action方法

/**
     * 查询机构列表
     *
     * @return
     * @throws Exception
     */
    public String queryInstitutionList() throws Exception {

        institutionInfoList = institutionService.queryInstitution();  //service自己写

        result = JSONUtil.serialize(institutionInfoList);  //要有get set方法

        log.debug(result);

        return SUCCESS;

    }

注意:查询出来的数据列表字段名要跟cell里面的对应,要不不显示。  select  institutionid  as   institutionId 

网友评论