「ligerui」ligerUi框架简单的表格展示

ligerui

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

下面是效果图：

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

</body>

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

var groupicon = "../../../images/common/purchase_head.png";

var groupicon1 = "../../../images/common/store.png";

$(function (){

$("#form2").ligerForm({

inputWidth: 170, labelWidth: 90, space: 40,

fields: [

{ display: "单据编号",id:"billid", name: "billid", newline: true, type: "text" , group: "采购订单",groupicon: groupicon},

{

display: "渠道", name: "entnum", textField: "entnum",

newline: false, type: "combobox", editor: {

selectBoxWidth: 600,

selectBoxHeight: 300,

textField: 'entnum',

valeuField: 'entnum',

condition: {

prefixID : 'condition_',

fields: [

{ label: '渠道', name: 'entnum', type: 'combobox',editor:{

selectBoxWidth: 600,

selectBoxHeight: 300,

textField: 'entnum',

valeuField: 'entnum',

data:{}

} }

]

grid: {

columns: [

{ display: '编号', name: 'entnum', align: 'left', width: 140, minWidth: 33 },

{ display: '公司名', name: 'ename', minWidth: 120 },

{ display: '电话', name: 'mobile', minWidth: 140 },

{ display: '负责人', name: 'liabilityman' }

], data: EntData, isscroll: false, sortName: 'entnum',

width: 680

}

}},

{ display: "状态 ", name: "state", newline: false, type: "select", options: { data:[{"id":"1","text":"入账"},{"id":"2","text":"审核"},{"id":"3","text":"制单"},{"id":"4","text":"过账"},{"id":"5","text":"作废"}] } },

{ display: "单据日期 ", name: "AddTime", newline: true, type: "date" },

{ display: "仓店", name: "QuantityPerUnit", newline: false, type: "number" },

{ display: "单价", name: "UnitPrice", newline: false, type: "float",editor:{precision:4} },

{ display: "库存总量", name: "UnitsInStock", newline: true, type: "float",editor:{precision:4}, group: "库存",groupicon: groupicon1},

{ display: "总金额", name: "UnitsOnorder", newline: false, type: "float",editor:{precision:4} },

{ display: "备注", name: "Remark", newline: true, type: "textarea" ,width:470 }

],buttons: [{ text: "查询", width: 60, click: search }]

});

$(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框架简单的表格展示

ligerui

相关阅读

栏目导航

推荐阅读

热门阅读