MiniUI DataGrid 页面分页-前端分页

版权声明:未经博主允许,请勿转载原创,谢谢! https://blog.csdn.net/mystonelxj/article/details/78797332

作为一种前框开发脚本,Mini 目前已经到了3.0.对于Mini的使用,各类介绍也有不少,官网http://www.miniui.com/demo/ 也有不少介绍。但是具体到一些应用,总是有些差别。

具体而言,Datagrid 分页可分为两种模式,一种是将数据取回到前端,在前端做分页,另一种是 将参数传递到后台,获取了分页结果后直接传递回前端。

在使用miniui datagrid 控件之前,需要引入 两个js 文件,两个css 文件

js:

jquery-1.8.2.min.js  (jquery版本可以是最新,但是必须是 .mini)

miniui.js

css:

miniui.css  (默认情况下在miniui 插件的 default 路径下

icons.css


以asp mvc 作为后台开发语言,具体做法

1,应用visio studio 2013 开发模板,生成 mvc  基本 项目模块;

2,Controllers 建立控制器 demoController 

    public class DemoController : Controller
    {
        //
        // GET: /Demo/

        public ActionResult Index()
        {
            return View();
        }

    }


3,通过控制器生成对应的视图 index.cshtml

@{
    ViewBag.Title = "DataGrid 数据表格 前台页面分页";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@ViewBag.Title</title>
    <h2>@ViewBag.Title</h2>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/miniui.js"></script>
    <link href="~/Content/icons.css" rel="stylesheet" />
    <link href="~/Content/default/miniui.css" rel="stylesheet" />
</head>
<body>
    <div id="datagrid1" class="mini-datagrid" style="width:600px;height:280px;" idfield="id" pagesize="3" showpager="false">
        <div property="columns">
            <div type="indexcolumn">顺序</div>
            <div field="price" width="120" headeralign="center" allowsort="true">价格</div>
            <div field="quantity" width="100" allowsort="true">数量</div>
        </div>
    </div>
    <script type="text/javascript">
        mini.parse();
        var grid = mini.get("datagrid1");
        // 分页填充细节处理
        function fillData(pageIndex, pageSize, dataResult, grid) {

            var data = dataResult.data, totalCount = dataResult.total;
            var arr = [];
            var start = pageIndex * pageSize, end = start + pageSize;
            for (var i = start, l = end; i < l; i++) {
                var record = data[i];
                if (!record) continue;
                arr.push(record);
            }

            grid.setTotalCount(totalCount);
            grid.setPageIndex(pageIndex);
            grid.setPageSize(pageSize);
            grid.setData(arr);
        }
        // 监听分页前事件,阻止后自行设置当前数据和分页信息
        grid.on("beforeload", function (e) {
            e.cancel = true;
            var pageIndex = e.data.pageIndex, pageSize = e.data.pageSize;
            fillData(pageIndex, pageSize, dataResult, grid);
        });
        ////////////////////////////////////////////////////////////////////////
        // 获取所有数据和总记录数 { total: 100, data: [...] }
        var dataResult = null;
        $.ajax({
            url: '../data.txt',
            dataType: 'text',
            success: function (text) {
                dataResult = mini.decode(text);
                fillData(0, grid.getPageSize(), dataResult, grid);
            }
        });
    </script>
</body>
</html>


4, 编写 data.txt文件,将数据存放为json 格式

{
 total: 6,
 data: [
            {price:'100',quantity:'20'},
            {price:'200',quantity:'30'},
            {price:'300',quantity:'40'},
            {price:'400',quantity:'50'},
            {price:'500',quantity:'60'},
            {price:'600',quantity:'70'}
        ]
}



5,编译运行后,出现以下效果页面


至此,分页效果完成。



 





阅读更多
换一批

没有更多推荐了,返回首页