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

在layui中使用ajax传值给后台,浅谈layui 数据表格前后台传值的问题
1.1查询 layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : ...
layui循环数据并渲染_layui使用表格渲染获取行数据的例子
需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据. 解决办法: 在render中增加字段: done: function (res, curr, count) { // ...
vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化
Vue - Table表格渲染上千数据优化此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当 ...
bootstrap 树形表格渲染慢_bootstrap-table-treegrid数据量较大时渲染太久了
bootstrap-table-treegrid数据量较大时渲染太久了森姐姐 2019-10-23 16:48:51 2260 收藏 2 分类专栏: 遇到的问题最后发布:2019-10-23 16 ...
1万条数据大概占多大空间_Vue - Table表格渲染上千数据优化
这次项目经验会谈谈经常在项目中,针对成千上万数据渲染优化的不断探索来谈谈自己的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操作过程中不会出现UI卡顿或者最糟糕的情况,直接浏览器 ...
layui当前表格第一行_layui使用表格渲染获取行数据的例子
需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据. 解决办法: 在render中增加字段: done: function (res, curr, count) { // ...
【ElementUI】el-table 多表格切换导致 expands 展开行仍然会保留的问题（多表格切换时的表格渲染错乱）
首先先叙述一下需求和遇到的问题: 需求: 在这个页面里,我需要去判断查询条件,从而在不同的条件下,展示不同的表格数据,即在不同情况下,展示不同的表格或者说表格的数据列,从而在不同的条件下看到不同的表格 ...
layui分页数据表格渲染
最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来先说前端HTML和js代码 <script src= ...
Layui中的数据表格渲染
学习前端代码的朋友们应该都有所闻layui这个框架,这是一款遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用的前端 UI 框架.如果有需要可以通过官网下载得到,使用起来也极其方便 ...

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

miniui使用初级总结：表格渲染，传值相关推荐

最新文章

热门文章