03.LoT.UI 前后台通用框架分解系列之——多样的表格
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui
LoT.UI开源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI
先看在LoT.UI里面的应用效果图:
关键代码解析:
引用部分:
HTML代码:
<div id="lotToolbar" class="btn-group">
<button type="button" class="btn btn-default" id="lotadd"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn btn-default" id="lotrerecover"><i class="glyphicon glyphicon-share-alt"></i></button>
<button type="button" class="btn btn-default" id="lotremove"><i class="glyphicon glyphicon-trash"></i></button>
</div>
<table id="lotTable"></table>
初始化Js代码(建议):
var lotTab = $('#lotTable');$(document).ready(function () {lotTab.bootstrapTable({toolbar: '#lotToolbar', //自定工具method: 'get', //请求方式url: '/Demo/data.json', //请求地址queryParams: { searchText: '' }, //传递参数height: 500, //表格高度pagination: true, //启用分页pageSize: 10, //每页条数pageList: [20, 50, 100, 200, 500], //显示条数search: true, //启用搜索searchOnEnterKey: true, //回车搜索//strictSearch: true, //精确搜索(默认模糊)showColumns: true, //内容选框showRefresh: true, //启用刷新clickToSelect: true, //单行选中showPaginationSwitch: true, //条数显示maintainSelected: true, //记住选中(分页或搜索时保留选中状态)striped: true, //隔行变色//escape: true, //转义HTML(不需要自己转义了)columns: [{field: 'State',checkbox: true},{field: 'Id',title: '序列号',align: 'center',sortable: true},{field: 'SName',title: '超市名',align: 'center',sortable: true,},{field: 'MName',title: '菜单名',align: 'center',sortable: true},{field: 'MPrice', //字段名字title: '价格点', //标题名字align: 'center', //对齐方式sortable: true, //支持排序formatter: function (value, row, index) { //格式方法//保留小数点两位var s = value.toString();var rs = s.indexOf('.');if (rs < 0) {rs = s.length;s += '.';}while (s.length <= rs + 2) {s += '0';}return s;}},{field: 'MType',title: '所属类',align: 'center',sortable: true},{title: '单操作',align: 'center',formatter: function (value, row, index) {return '<a href="#' + row.Id + '" class="edit glyphicon glyphicon-pencil"></a> <a href="#" class="remove glyphicon glyphicon-trash"></a>';},events: {'click .edit': function (e, value, row, index) {location.href = 'Edit.html?id=' + row.Id;},'click .remove': function (e, value, row, index) {updateData(row.Id, 99);}}}],select: true});});
组件地址:https://github.com/wenzhixin/bootstrap-table
03.LoT.UI 前后台通用框架分解系列之——多样的表格相关推荐
- 08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- 07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示(可自动切换背景)...
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- 视频教程-游戏UI界面框架设计系列视频课程-Unity3D
游戏UI界面框架设计系列视频课程 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过程.软件架构设计理论. ...
- Android通用框架设计与完整电商APP开发系列文章
作者|傅猿猿 责编|Javen205 有福利 有福利 有福利 鸣谢 感谢@傅猿猿 邀请写此系列文章 Android通用框架设计与完整电商APP开发 课程介绍 [[导学视频](http://szv1.m ...
- 基于 Ruby 谈谈——程序设计语言的通用框架
基于 Ruby GScript 谈谈--程序设计语言的通用框架 目录 基于 Ruby GScript 谈谈--程序设计语言的通用框架 一.架构思维导图 1.Ruby GScript 介绍 2.实践: ...
- SLAM的通用框架:GSLAM
SLAM的通用框架:GSLAM GSLAM: A General SLAM Framework and Benchmark 论文链接: http://openaccess.thecvf.com/con ...
- 拿transformer做E2E全景分割,这个通用框架霸榜挑战赛,南大、港大联合提出
视学算法报道 机器之心编辑部 本文中,来自南大.港大.英伟达等机构的研究者提出了一个使用 transformer 进行端到端全景分割的通用框架,不仅为语义分割与实例分割提供了统一的 mask 预测工作 ...
- Transformer霸榜全景分割任务,南大、港大提出一种通用框架!
来源:机器之心 本文中,来自南大.港大.英伟达等机构的研究者提出了一个使用 transformer 进行端到端全景分割的通用框架,不仅为语义分割与实例分割提供了统一的 mask 预测工作流程,而且使得 ...
最新文章
- ccf-csp #201912-1 报数
- php jira,php – 为Jira的api添加附件
- SSM中jsp向后台Controller传值中文乱码的奇葩解决!!!
- 根据您的命令-命令设计模式
- 公司电脑监控软件_公司电脑监控软件,如何限制公司电脑网络游戏
- Shell_参数替换(転)
- Spring框架中的控制反转和依赖注入
- java word转图片tiff_Word 2010中将文档保存为TIFF图片的方法
- php中get结合mysql_php中,$_GET中的数值能被mySQL读到么?
- java前台计算date差_js前台计算两个日期的间隔时间
- 微软中文论坛2010新年Party手记
- check_mk自定义监控增加性能数据图形展示
- xmind怎么在左边创建_威纶通 触摸屏自动化应用篇 创建程序界面及画面应用
- webpack+vue动态加载组件尝试
- Java基础之Java 修饰符
- 在从服务器接收结果时发生传输级错误。(provider: TCP 提供程序, error: 0 - 信号灯超时时间已到)...
- Python数据挖掘——概况
- Linux内核的WRITE_ONCE函数分析
- 小红书探店流程有哪些?小红书探店博主如何联系?
- Qt调用7z实现压缩和解压缩