jQuery MiniUI

标题: datagrid的左下方翻页按钮不能自动翻页？ [打印本页]

作者: hbpqwxh 时间: 2019-1-3 10:26:39 标题: datagrid的左下方翻页按钮不能自动翻页？

datagrid的左下方翻页按钮不能自动翻页？请问是不是需要添加代码？
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="base_material.aspx.cs" Inherits="jjs_base_material" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
<script src="../scripts/boot.js" type="text/javascript"></script>
<script src="../CommonLibs/UserSelectWindow.js" type="text/javascript"></script>
<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../scripts/miniui/miniui.js" type="text/javascript"></script>
</head>
<body>


<div style="width:800px;">
      <div class="mini-toolbar" style="border-bottom:0;padding:0px;">

                  <a>编号：</a>
                  <input id="ID_INPUT_ID" name="INPUT_ID" class="mini-textbox"  style=" width:100px"  emptyText=""/>
                  <a>名称：</a>
                  <input id="ID_INPUT_NAME"  name="INPUT_NAME" class="mini-textbox"  style=" width:100px"  emptyText=""/>
                  <a>备注：</a>
                  <input id="ID_INPUT_REMARK"  name="INPUT_REMARK" class="mini-textbox"  style=" width:150px"  emptyText=""/>
                  <a class="mini-button" iconCls="icon-add">新增</a>
                  <a class="mini-button" iconCls="icon-edit">修改</a>

                  <a class="mini-button" iconCls="icon-remove">删除</a>
                  <a class="mini-button" iconCls="icon-reload">刷新</a>

      </div>
</div>
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:580px;" allowResize="true"
      idField="TRAIN_NO" multiSelect="true"
>
      <div property="columns">
         <div type="checkcolumn" ></div>
         <div field="ID" width="120" headerAlign="center" allowSort="true">编码</div>
         <div field="NAME" width="120" headerAlign="center" allowSort="true">名称</div>
         <div field="REMARK" width="120" headerAlign="center" allowSort="true">备注</div>
         <div field="OPER_DATE" width="120" headerAlign="center" dateFormat="yyyy-MM-dd hh:mm:ss" allowSort="true">操作时间</div>
         <div field="OPERATOR" width="120" headerAlign="center" allowSort="true">操作人</div>

      </div>
</div>

<script type="text/javascript">
      mini.parse();
      var obj = mini.getParams();
      var grid = mini.get("datagrid1");
      // grid.load();
      var url = location.search;
      var Request = new Object();
      if (url.indexOf("?") != -1) {
         var str = url.substr(1)//去掉?号
         strs = str.split("&");
         for (var i = 0; i < strs.length; i++) {
            Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
         }
      }

      grid.setUrl("../jjs/jjs_webtoserver.aspx?method=GetMaterialAll");

      grid.load()
      grid.gotoPage(1, 100);
      //sessionStorage.setItem('OPERATOR', 'SYS');

      function add() {
         var txt_id = mini.getbyName("INPUT_ID").value;
         var txt_name = mini.getbyName("INPUT_NAME").value;
         var txt_remark = mini.getbyName("INPUT_REMARK").value;

         var paramsObj = {
            txt_id: txt_id,
            txt_name: txt_name,
            txt_remark: txt_remark,
         }

         if (confirm("您是否确定增加数据吗？")) {
            grid.loading("操作中，请稍后......");
            $.ajax({
                  url: "../jjs/jjs_webtoserver.aspx?method=base_material_add",
                  type: 'post',
                  data: paramsObj,
                  success: function (text) {
                     grid.reload();
                  },
                  error: function () {
                  }
            });
         }
      }

      function edit() {
         var currentRow = grid.getSelected();
         var row = grid.indexOf(currentRow);
         var txt_id = grid.data[row]["ID"];
         var rows = grid.getSelecteds();
         var txt_name = mini.getbyName("INPUT_NAME").value;
         var txt_remark = mini.getbyName("INPUT_REMARK").value;

         var paramsObj = {
            txt_id: txt_id,
            txt_name: txt_name,
            txt_remark: txt_remark
         }

         if (rows.length > 0) {
            if (confirm("您是否确定修改选定数据吗？")) {
                  grid.loading("操作中，请稍后......");
                  $.ajax({
                     url: "../jjs/jjs_webtoserver.aspx?method=base_material_modify",
                     data: paramsObj,
                     type: "post",
                     success: function (text) {
                        grid.reload();
                     },
                     error: function () {
                     }
                  });
            }
         } else {
            alert("请选中一条记录");
         }

      }

      $('#datagrid1').click(function () {
                  var currentRow = grid.getSelected();
                  var row = grid.indexOf(currentRow);

                  mini.get("ID_INPUT_ID").setValue(grid.data[row]["ID"]);
                  mini.get("ID_INPUT_NAME").setValue(grid.data[row]["NAME"]);
                  mini.get("ID_INPUT_REMARK").setValue(grid.data[row]["REMARK"]);
            });

               function remove() {
                  var currentRow = grid.getSelected();
                  var rows = grid.getSelecteds();
                  var row = grid.indexOf(currentRow);
                  var txt_id = grid.data[row]["ID"];
                  if (rows.length > 0) {
                     if (confirm("确定删除选中记录？")) {

                        var paramsObj = {
                              txt_id: txt_id
                        }
                        grid.loading("操作中，请稍后......");
                        $.ajax({
                              url: "../jjs/jjs_webtoserver.aspx?method=base_material_del",
                              data: paramsObj,
                              type: "post",
                              success: function (text) {
                                 grid.reload();
                              },
                              error: function () {
                              }
                        });
                     }
                  } else {
                     alert("请选中一条记录");
                  }
            }

   function reupdate() {
         grid.reload();
      }

</script>

<div class="description">


</div>
</body>
</html>

作者: felt 时间: 2019-1-3 11:34:23

grid.gotoPage(1,100)是樊到第二页，每页显示100条数据，
你有后台接收这2给参数进行查询处理吗

作者: hbpqwxh 时间: 2019-1-3 13:23:23

grid.gotoPage(1, 100);
这个是网页打开时默认设定每页显示100条，并显示网页数据的前100条。
在刚打开网页时没有问题呀，之后翻页按钮不起作用了。

作者: felt 时间: 2019-1-3 13:40:54

hbpqwxh 发表于 2019-1-3 13:23
grid.gotoPage(1, 100);
这个是网页打开时默认设定每页显示100条，并显示网页数据的前100条。
在刚打开网页 ...

gotoPage(1,100)是翻到第二页，你初始没显示第二页，并且不能翻页，说明你的后台并不支持，或者你的数据只有一页。

作者: hbpqwxh 时间: 2019-1-3 14:17:37

[attach]11825[/attach]
数据有3页，怎样才能开始每页显示100条，可以翻页呢，请赐教！

作者: felt 时间: 2019-1-3 15:10:02

hbpqwxh 发表于 2019-1-3 14:17
数据有3页，怎样才能开始每页显示100条，可以翻页呢，请赐教！

分页是后台处理的。从你的截图看，你后台并未处理，返回了全部数据。
我们每页传递pageIndex和pageSize到后台，后台根据这两个参数组织当页数据返回。
可以参考我们试用包里面的后台处理。
http://www.miniui.com/download/

作者: hbpqwxh 时间: 2019-1-3 15:29:37

不是呀，你们的例子。pageIndex和pageSize没有呀，也没有重新组织数据呀，也能翻页呀。
比如典型界面的表单查询

作者: felt 时间: 2019-1-3 15:44:57

hbpqwxh 发表于 2019-1-3 15:29
不是呀，你们的例子。pageIndex和pageSize没有呀，也没有重新组织数据呀，也能翻页呀。
比如典型界面的表单 ...

[attach]11826[/attach]后端处理，请仔细看试用包里面的示例。
如图，翻页的时候传递翻页参数到后台，然后后台根据参数查询组织当页数据，当页数据，不是像你这样返回全部数据。

作者: hbpqwxh 时间: 2019-1-4 16:54:37

你好，页面打开如果不设定的话，每页默认显示100条，如果我想让它不分页，所有数据全显示出来该怎么改呀？

作者: hbpqwxh 时间: 2019-1-4 17:15:06

已经知道了，谢谢。showPager="false"

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