miniui使用初级总结：表格渲染，传值

1.表格数据的渲染：示例：

 <div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" idField="id" multiSelect="true"
        title="查询学生信息" emptyText="您好:系统暂无数据！" sizeList="[5,10]" showPageSize="true" showPageIndex="true"
        showPageInfo="true" showReloadButton="false">
        <div property="columns">
           
            <div type="indexcolumn">序号</div>
            <div field="stuName" width="100" headerAlign="center" allowSort="true">姓名</div>
            <div field="sex" width="80" headerAlign="center" renderer="onsexrenderer" allowSort="true">性别</div>
            <div field="addDate" width="120" headerAlign="center" renderer="onaddDaterenderer" allowSort="true">入学日期
            </div>
            <div field="idNum" width="80" headerAlign="center" renderer="onidNumrenderer" allowSort="true">年龄</div>
            <div name="play" width="100" headerAlign="center" renderer="onplayrenderer">操作</div>
        </div>
    </div>

总结：

1.如果表格第一列是序号 <div type="indexcolumn"></div>

表格第一页是选择框 <div type="checkcolumn"></div>

2.注意表格字段：field字段的名字与你向给后台请求json字段对应，如果没有对应就会出现空格无数据现象；

表格对象的获取，通过id获取 var grid = mini.get("datagrid1");

设置值：grid.setData(arr); 其中这个arr就是向前端请求的对象集合

3.如果表格字段渲染数据时有格式或者显示的转换需求，需要设置render渲染函数

eg:

 <div field="sex" width="80" headerAlign="center" renderer="onsexrenderer" allowSort="true">性别</div>

对应的函数操作：

function onsexrenderer(e) {
            if (e.value == 0) return '女';
            return '男';
        }

常见的对日期的渲染：

 function onaddDaterenderer(e) {
            var value = e.value;
            if (value) return mini.formatDate(new Date(value), 'yyyy-MM-dd');
            return "";
        }

4.动态渲染表格上的操作按钮：

  //对表格数据的操作按钮
        function onplayrenderer(e) {
            var grid = e.sender; //代表了整个表格
            var record = e.record; //代表了当前渲染的一行表格数据
            var stuID = record.stuID; //一条数据的一个属性
            var rowIndex = e.rowIndex; //当前行的下标
            var s = '<a class="mini-button" href="javascript:delRow(\'' + stuID + '\')" >删除</a>' +
                '<a class="mini-button" href="javascript:editRow(\'' + rowIndex + '\')" >编辑</a>';
            return s;
        }

5.表格点击编辑时打开子窗口并且进行传值操作：(切记子页面的函数要自己设置）

  function editRow(index) { //修改学生的操作
               //根据rowInde获取对象
              var grid = mini.get("datagrid1");
            var datas = grid.data[index]; //当前选中的对象
            mini.open({
                targetWindow: window, //页面对象。默认是顶级页面。
                url: "editstu.html",
                title: "修改学生专业",
                width: 700,
                height: 400,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    var data = {
                        action: "edit",
                        data: mini.encode(datas)
                    }; //传值给子页面
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) { //关闭子窗口需要更新当前数据，防止修改数据
                    getdata(); //更新表格数据
                }

            })

        }

子页面对应的函数：（设置函数之后即可渲染子页面，基本上子页面都是一个表单）

   var form = new mini.Form("#form1");
        //标准方法接口定义
        function SetData(data) {
            if (data.action == "edit") {
                //跨页面传递的数据对象，克隆后才可以安全使用
                data = mini.clone(data);
                values = mini.decode(data.data); //做全局变量使用
                values.addDate= mini.formatDate(new Date(values.addDate), 'yyyy-MM-dd');
                form.setData(values);
            }
        }

6.表格数据的渲染，前端分页（基本上跟官网上的一样，我就是把ajax后台取值封装了一下，开始渲染的时候调用

我的json接受格式基本上是{"data":[{对象}，{对象}],flag:true,message:"成功"}

系统的分页函数主要就是这两句，在请求数据时给设置值

dataResult.total = result.data.length;

dataResult.data = result.data;

）

 function getdata() { //请求表格数据的方法
            //请求数据赋值，现请求静态数据
            $.ajax({
                url: "../data/mark.json",
                //不需要发送数据
                success: function (result) { //成功操作
                    if (result.flag) { //请求成功，设置表格数据
                        var dataResult = {};
                        dataResult.total = result.data.length;
                        dataResult.data = result.data;
                        // 监听分页前事件，阻止后自行设置当前数据和分页信息
                        grid.on("beforeload", function (e) {
                            e.cancel = true;
                            var pageIndex = e.data.pageIndex,
                                pageSize = e.data.pageSize;
                            fillData(pageIndex, pageSize, dataResult, grid);
                        });
                        // 第一次设置
                        fillData(0, grid.getPageSize(), dataResult, grid);
                    } else {
                        console.log("请求失败！");
                    }
                },
                error: function () {
                    console.log("发送数据失败");
                }
            })
        };

官网的分页函数：

 // 分页填充细节处理
         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);
        }

7.单纯的在表格界面打开一个子窗口的方法：

targetWindow: window, //页面对象。默认是顶级页面。（不明觉厉，我也不太知道它的作用，但是好像不能省略）

下面的关闭ondestroy时，我调用了自己封装的表格渲染数据函数，刷新界面的数据，这个函数上面也说了

  function add() {
            mini.open({
                targetWindow: window, //页面对象。默认是顶级页面。
                url: "addmark.html",
                title: "新增成绩",
                width: 700,
                height: 400,
          ondestroy: function (action) { //关闭时，因为做了添加操作。所以页面数据需要重新请求
                    getdata();
                }
            });
        }

miniui使用初级总结：表格渲染，传值

猜你喜欢