jQuery MiniUI

 找回密码
 立即注册
查看: 13419|回复: 18
打印 上一主题 下一主题

无法分页,大家看看是什么原因? [复制链接]

Rank: 1

跳转到指定楼层
楼主
发表于 2012-5-14 08:56:14 |只看该作者 |倒序浏览


代码如下:

       <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;" borderStyle="border:0"
        url="customer.do?action=SearchAllCust"  idField="id" allowAlternating="true"
        
       >
        <div property="columns">            
            <div name="actionstr" width="100" headerAlign="center">#</div>
            <div field="CustomerName" width="120" headerAlign="center" allowSort="true">会员姓名</div>   
            <div field="tel" width="120" headerAlign="center" allowSort="true">手机号码</div>  
            <div header="生日" headerAlign="center">
                <div property="columns">
                    <div field="year" width="80" allowSort="true">年</div>
                    <div field="month" width="40" allowSort="true">月</div>
                    <div field="day" width="40"  allowSort="true">日</div>
                </div>
            </div>
            
              <div header="其它信息" headerAlign="center">
                <div property="columns">
                    <div field="flag" width="40" renderer="onFlagRenderer" allowSort="true">免打扰</div>
                    <div field="Integral" width="50" allowSort="true">累计积分</div>
                    <div field="memo" width="500" >备注</div>
                </div>
            </div>
                     
        </div>
            </div>   
        </div>
    </div>
    <div title="会员订单信息">
        
        
        
        
        
    <div id="ordermain_grid" class="mini-datagrid" style="width:100%;height:100%;" borderStyle="border:0"  allowResize="true"
        url="ordermain.do?action=SearchList"  idField="id"
           
      
    >
        <div property="columns">            
            <div type="expandcolumn" width="30">#</div>
            <div field="orderno" width="80" headerAlign="center" >订单编号</div>                                       
            <div field="orderdate" width="100" allowSort="true" dateFormat="yyyy-MM-dd">订单日期</div>
            <div field="paymentid" width="80" headerAlign="center" >支付方式</div>  
            <div field="orderamount" width="80" headerAlign="center" >订单金额</div>         
        </div>
    </div>
    <div id="orderdetailGrid_Form" style="display:none;">
        <div id="orderdetail_grid" class="mini-datagrid" style="width:100%;height:150px;"
            url="orderdetail.do?action=SearchOrderDetail"   
        >
            <div property="columns">
                 <div field="goodscode" width="100" allowSort="true">商品编码
                </div>   
               
                 <div field="color" width="40" allowSort="true">颜色
                </div>
               
                <div field="size" width="40" allowSort="true">尺码
                </div>
               
                <div field="classname" width="50" allowSort="true">商品类型
                </div>
               
                <div field="price" width="40" allowSort="true">吊牌价
                </div>
               
                 <div field="num" width="40" allowSort="true">数量
                </div>
               
                 <div field="discount" width="40" allowSort="true">折扣
                </div>   
               
                 <div field="memo" width="300" allowSort="true">备注
                </div>               
                              
            </div>
        </div>   
    </div>
   

    </div>
</div>


    <script type="text/javascript">
         mini.parse();
        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("id", "desc");
        
        
        var ordermain_grid = mini.get("ordermain_grid");
        var orderdetail_grid = mini.get("orderdetail_grid");
        var orderdetailGrid_Form = document.getElementById("orderdetailGrid_Form");
        
        
        
          function search() {
            var key = document.getElementById("key").value;
            grid.load({ key: key });
        }
        $("#key").bind("keydown", function (e) {
            if (e.keyCode == 13) {
                search();
            }
        });
        function onFlagRenderer(e) {
            if (e.value == 1) return "是";
            else return "否";
        }
        
        
        function onSelectionChanged(e) {
            ordermain_grid.load({ cust_id: record.id });
        }
        
        
        
        function onShowRowDetail(e) {
            var grid = e.sender;
            var row = e.record;
         
            var td = grid.getRowDetailCellEl(row);
            td.appendChild(orderdetailGrid_Form);
            orderdetailGrid_Form.style.display = "block";
            orderdetail_grid.load({ordermain_id: row.id });
        }
         
         
        function add() {
            mini.open({
                url:  "SaveorUpdateCust.html",
                title: "新增会员", width: 500, height: 250,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    var data = { action: "new"};
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {
                    grid.reload();
                }
            });
        }
        
        
     
        
        function edit(rowid) {
             mini.open({
                    url: "SaveorUpdateCust.html",
                    title: "编辑会员", width: 500, height: 250,
                    onload: function () {
                        var iframe = this.getIFrameEl();
                        var data = { action: "edit", id: rowid };
                        iframe.contentWindow.SetData(data);
                    },
                    ondestroy: function (action) {                    
                        grid.reload();
                    }
                });
        }
        
        
      grid.on("drawcell", function (e) {
            var record = e.record,
                column = e.column,
                field = e.field,
                value = e.value;

           //action列,超连接操作按钮
            if (column.name == "actionstr") {
                e.cellStyle = "text-align:center";
                e.cellHtml = '<a href="javascript:edit(\'' + record.id + '\')">编辑</a>&nbsp; '
            }
            
        });  
        
    </script>
   
附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 9Rank: 9Rank: 9

沙发
发表于 2012-5-14 09:07:02 |只看该作者
从服务端返回的JSON结构:
{
    total: 100,     //总记录数
     data: [         //分页后的数组数据
         { ... },
        { ... },
        ...
    ]
}
必须要有total,这样才能计算出分页信息。

Rank: 1

板凳
发表于 2012-5-14 10:08:59 |只看该作者
fcrong 发表于 2012-5-14 09:07
从服务端返回的JSON结构:
{
    total: 100,     //总记录数

老大 帮忙看看 代码:

        public ActionForward doSearchAllCust(
                        ActionMapping mapping,
                        ActionForm form,
                        HttpServletRequest request,
                        HttpServletResponse response) throws Exception{
                request.setCharacterEncoding("UTF-8");
                response.setCharacterEncoding("UTF-8");       
            //查询条件
            String key = request.getParameter("key");
            String customername=request.getParameter("customername");
            //分页
            int pageIndex =Integer.parseInt(request.getParameter("pageIndex"));
            int pageSize = Integer.parseInt(request.getParameter("pageSize"));;        
            //字段排序
            String sortField = request.getParameter("sortField");
            String sortOrder = request.getParameter("sortOrder");
            
            HashMap result = SearchAllCust(key,customername, pageIndex, pageSize, sortField, sortOrder);
            String json = PluSoft.Utils.JSON.Encode(result);
            System.out.println(json);
            response.getWriter().write(json);
               
                 return null;

        }





打印的结果:
{"total":"70","data":[{"month":5,"memo":"备注","day":4,"year":1993,"Integral":0,"flag":0,"CustomerName":"测试","tel":"13971251443","id":72},.......



为什么不会产生翻页呢,java版本的demo例子里面也没有分页 总数量都是0。

Rank: 3Rank: 3

地板
发表于 2012-5-14 10:31:30 |只看该作者
fcrong 发表于 2012-5-14 09:07
从服务端返回的JSON结构:
{
    total: 100,     //总记录数

请问在点击上一页、下一页、首页、尾页各会促发什么事件?





当选择了每页的记录数之后又会促发什么事件?谢谢




附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 9Rank: 9Rank: 9

5#
发表于 2012-5-14 11:16:48 |只看该作者
分页控件会激发pagechanged事件。
datagrid会自动捕捉此事件,然后会去后台加载数据。

Rank: 1

6#
发表于 2012-5-14 12:25:20 |只看该作者
969844859 发表于 2012-5-14 10:31
请问在点击上一页、下一页、首页、尾页各会促发什么事件?

每页多少 选择了没问题,选择50后 当页出现50条。

首页 上一页 下一页 尾页 都不可选择。。不知道是不是total 返回后没赋值到控件上

Rank: 3Rank: 3

7#
发表于 2012-5-14 14:57:40 |只看该作者
chengongpu 发表于 2012-5-14 12:25
每页多少 选择了没问题,选择50后 当页出现50条。

首页 上一页 下一页 尾页 都不可选择。。不知道是不是 ...

在后台需获得总记录数才能正确捕捉这些事件

Rank: 9Rank: 9Rank: 9

8#
发表于 2012-5-14 15:24:11 |只看该作者
你记录是否50条没超过啊。

Rank: 1

9#
发表于 2012-5-14 19:22:18 |只看该作者
fcrong 发表于 2012-5-14 15:24
你记录是否50条没超过啊。

哥们 当然超过了!

Rank: 1

10#
发表于 2012-5-14 19:23:34 |只看该作者
969844859 发表于 2012-5-14 14:57
在后台需获得总记录数才能正确捕捉这些事件

如何在后台获取此总记录?

Archiver|普加软件

GMT+8, 2024-11-25 22:32 , Processed in 1.049046 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部