jQuery MiniUI

标题: 无法分页，大家看看是什么原因？ [打印本页]

作者: chengongpu 时间: 2012-5-14 08:56:14 标题: 无法分页，大家看看是什么原因？

[attach]74[/attach]

代码如下：

   <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>  '
         }

      });

</script>

作者: fcrong 时间: 2012-5-14 09:07:02

从服务端返回的JSON结构：
{
total: 100,    //总记录数
   data: [       //分页后的数组数据
      { ... },
      { ... },
      ...
]
}
必须要有total，这样才能计算出分页信息。

作者: chengongpu 时间: 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。

作者: 969844859 时间: 2012-5-14 10:31:30

fcrong 发表于 2012-5-14 09:07
从服务端返回的JSON结构：
{
total: 100, //总记录数

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

[attach]75[/attach]

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

[attach]76[/attach]

作者: fcrong 时间: 2012-5-14 11:16:48

分页控件会激发pagechanged事件。
datagrid会自动捕捉此事件，然后会去后台加载数据。

作者: chengongpu 时间: 2012-5-14 12:25:20

969844859 发表于 2012-5-14 10:31
请问在点击上一页、下一页、首页、尾页各会促发什么事件？

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

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

作者: 969844859 时间: 2012-5-14 14:57:40

chengongpu 发表于 2012-5-14 12:25
每页多少选择了没问题，选择50后当页出现50条。

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

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

作者: fcrong 时间: 2012-5-14 15:24:11

你记录是否50条没超过啊。

作者: chengongpu 时间: 2012-5-14 19:22:18

fcrong 发表于 2012-5-14 15:24
你记录是否50条没超过啊。

哥们当然超过了！

作者: chengongpu 时间: 2012-5-14 19:23:34

969844859 发表于 2012-5-14 14:57
在后台需获得总记录数才能正确捕捉这些事件

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

作者: fcrong 时间: 2012-5-14 19:46:36

示例有后台代码的，你参考下就可以了。

作者: 969844859 时间: 2012-5-15 09:04:44

chengongpu 发表于 2012-5-14 19:23
如何在后台获取此总记录？

服务端访问数据时，通常会执行两条sql语句。

select * from tabRes· where ··

select count(*) from tabRes where ...

前面的保存数据列表，后边那条保存总记录数，然后返回就可以了··

作者: chengongpu 时间: 2012-5-15 12:51:31

969844859 发表于 2012-5-15 09:04
服务端访问数据时，通常会执行两条sql语句。

select * from tabRes· where ··

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

这是我打印的服务端返回的结果。total":"70" 但是返回后不知道是不是还要另外处理什么还是设置什么才行

作者: fcrong 时间: 2012-5-15 13:37:52

请确保"total"的值是数字。
{"total":"70"
=>
{"total":70

作者: chengongpu 时间: 2012-5-15 21:09:52

fcrong 发表于 2012-5-15 13:37
请确保"total"的值是数字。
{"total":"70"
=>

谢谢我试试

作者: lihui 时间: 2012-5-25 16:14:49

问题解决了吗？？？

作者: niko 时间: 2012-5-25 19:12:49

上周就解决了

作者: chengongpu 时间: 2012-5-26 22:34:31

lihui 发表于 2012-5-25 16:14
问题解决了吗？？？

解决了 new Integer(total)就可以了

作者: niko 时间: 2012-5-28 09:59:55

最新版支持字符串了。

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)