ligerUi框架简单的表格展示

最近新的ERP项目前端框架打算使用ligerui来做，之前也没怎么接触过这个，但据组长说该框架的好处是很多,比如界面风格容易统一，很多css样式它能帮你渲染，快捷高效，小巧等优点。最近几天就现学现用，一边做一边看API文档，它有一个特点，就是html里面基本没有什么代码，可能几个div，除去引用的js和css文件外 10几行就完事了，而很多内容都是下单独提出来放在一个js文件里面，下面就简单介绍一下这几天用ligerui完成table表格的渲染。

下面是效果图：

上图的html代码里面就仅仅只有2个div,一个div是上面查询条件的form，另外一个是下面的table，html代码如下:

body里面就2个div就可以了，前面说过它是通过js来完成页面的渲染的，所以我们来看下js里面的内容：

$(function(){
setgrid(null);
});

function setgrid(griddata){
grid = $("#maingrid4").ligerGrid({
columns: [
{ display: '单据编号', name: 'billid', align: 'left', width: 100 },
{ display: '单据日期', name: 'billdate',align: 'left', width: 90 },
{ display: '渠道名称', name: 'ename', align: 'left', width: 60 },
{ display: '入库仓店', name: 'storeid', align: 'left', width: 90 },
{ display: '采购员', name: 'buyer', align: 'left', width: 90 },
{ display: '总数', name: 'totalnum', align: 'left', width: 60 },
{ display: '总金额', name: 'totalmoney', align: 'left', width: 60 },
{ display: '审核人', name: 'markingman', align: 'left', width: 90 },
{ display: '审核日期', name: 'markingdate', align: 'left', width: 90 },
{ display: '制单人', name: 'auditman', align: 'left', width: 60 },
{ display: '制单日期', name: 'auditdate', align: 'left', width: 90 },
{ display: '过账人', name: 'accountspostingman', align: 'left', width: 90 },
{ display: '过账日期', name: 'accountspostingdate', align: 'left', width: 90 },
{ display: '作废人', name: 'blankoutmane', align: 'left', width: 60 },
{ display: '作废日期', name: 'blankoutdate', align: 'left', width: 90 },
{ display: '状态', name: 'state', align: 'left', width: 60 }

],
pageSize: 10,
toolbar: {
items: [
{ text: '增加', click: f_open, icon: 'add' },
{ line: true },
{ text: '修改', click: itemclick, icon: 'modify' },
{ line: true },
/* { text: '删除', click: deleteclick, img: '/control/images/delete.gif' }*/
{ text: '删除', click: deleteclick, img: '../../../images/common/delete.gif' },
{ text: '详情', click: itemclick, icon: 'search2' },
{ text: '审核', click: itemclick, img: '../../../images/common/adu.png' },
{ text: '制单', click: itemclick, img: '../../../images/common/marking.png' },
{ text: '过账', click: itemclick, img: '../../../images/common/accout.png' },
{ text: '作废', click: itemclick, img: '../../../images/common/blankout.png' },
{ text: 'excel导出', click: itemclick, img: '../../../images/common/excel.png' },
{ text: '盘点机导入', click: itemclick, img: '../../../images/common/pos.png' },
]
},
rownumbers: true
});
}

var PurchaseData = {
Rows: [{
"billid": "10100",
"billdate": "2016-11-12",
"ename":"宏宇物流",
"storeid":"嘉吉小店",
"buyer":"张忠信",
"totalnum":"13000",
"totalmoney":"780000",
"markingman":"刘红燕",
"markingdate":"2016-11-20",
"auditman":"王浩",
"auditdate":"2016-11-28",
"accountspostingman":"李梅",
"accountspostingdate":"2016-12-03",
"blankoutmane":"吴磊",
"blankoutdate":"2016-12-15",
"state":"作废"
},{
"billid": "10101",
"billdate": "2017-01-11",
"ename":"宏鑫快運",
"storeid":"中绿仓储",
"buyer":"李全友",
"totalnum":"11000",
"totalmoney":"275000",
"markingman":"-",
"markingdate":"-",
"auditman":"-",
"auditdate":"-",
"accountspostingman":"-",
"accountspostingdate":"-",
"blankoutmane":"-",
"blankoutdate":"-",
"state":"录入"
},{
"billid": "10102",
"billdate": "2017-04-12",
"ename":"友嘉超市",
"storeid":"中百仓储",
"buyer":"陈志明",
"totalnum":"130000",
"totalmoney":"9100000",
"markingman":"王菊",
"markingdate":"2017-04-14",
"auditman":"叶文海",
"auditdate":"2017-05-05",
"accountspostingman":"-",
"accountspostingdate":"-",
"blankoutmane":"-",
"blankoutdate":"-",
"state":"审核"
},{
"billid": "10103",
"billdate": "2017-09-04",
"ename":"中百汇商城",
"storeid":"1F专柜台",
"buyer":"刘中朝",
"totalnum":"400",
"totalmoney":"4800000",
"markingman":"孙丽丽",
"markingdate":"2017-06-20",
"auditman":"柯文刚",
"auditdate":"2017-06-23",
"accountspostingman":"李志涛",
"accountspostingdate":"2017-07-02",
"blankoutmane":"-",
"blankoutdate":"-",
"state":"过账"
}],
Total: 1
};

其实看代码也非常简单仅仅是2个方法就可以完成 ligerForm和ligerGrid这2个对象。

columns:元素数组，

display：类似标题名称，

name：同html的name，

type：元素类型，

newline：是否换行，

还有一些同html里面大同小异的，比如width，height这些常用的属性。用起来也特别方面

ligerUi框架简单的表格展示相关推荐

[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题在一个完整的数据数据渲染的 elementui 表格组件中,筛选输出数据目录布局代码 ...
element框架的teble表格的数据展示由横向转纵向
<template><div class="m50"><el-table border style="margin-top: 50px;&q ...
Selenium自动化测试框架—简单了解
Selenium自动化测试框架-简单了解 Selenium自动化测试框架 Selenium IDE Selenium API基础 Selenium API高级案例 Selenium自动化测试框架什 ...
el-admin框架简单解析
el-admin框架简单解析 el-admin 简单了解使用框架的四大步前端文件架构 el-admin前端部分解析前端Vue目录结构 Layout 布局 mixins 混入模式 router 路 ...
python：web后台框架简单实现
python:web后台框架目录简介:BS开发和http协议 WSGI概述类flask框架简单实现 response使用及wsgify装饰器路由模板原理 jinjia2模板技术模块化,ja ...
vue前端表格插件_Grid.js - 跨框架的前端表格插件
只想简简单单画个表格,但 React,Vue,Angular,-,这么多前端框架,各自都有不同的表格渲染库.就没有表格库能"一次画表,到处运行"吗?来看看 Grid.js 这个跨框 ...
甘教课标版小学生计算机课,测评：《第6课制作简单的表格教案》小学信息技术甘教课标版五年级上册教案4696(2)...
5．如果应改变表格的长度跟高度,则把鼠标移到表格的竖线和横线上,当鼠标变成"|"和"="时,按住滑鼠左键,拖动鼠标,即可拖动半径和高度. 6．在表格中输入火车时 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
elementui 双击el-table表格展示输入框修改数据
参考:element ui 双击表格展示输入框修改数据_7ing酒的博客-CSDN博客_双击输入框展示: 功能:就是一个简单的table表格通过双击某一项进行修改.(其实就是双击之后变成一个in ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码...
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...

ligerUi框架简单的表格展示

ligerUi框架简单的表格展示相关推荐

最新文章

热门文章