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

您所在的位置：网站首页 › datagrid分页传递参数 › miniui使用初级总结：表格渲染，传值

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

2023-08-15 17:24| 来源: 网络整理| 查看: 265

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

序号姓名性别入学日期年龄操作

总结：

1.如果表格第一列是序号

表格第一页是选择框

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

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

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

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

eg:

性别

对应的函数操作：

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 = '删除' + '编辑'; return s; }

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

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

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 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使用初级总结：表格渲染，传值

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

今日新闻

推荐新闻