ligerUi框架简单的表格展⽰
最近新的ERP项⽬前端框架打算使⽤ligerui来做，之前也没怎么接触过这个，但据组长说该框架的好处是很多,⽐如界⾯风格容易统⼀，很多css样式它能帮你渲染，快捷⾼效，⼩巧等优点。最近⼏天就现学现⽤，⼀边做⼀边看API⽂档，它有⼀个特点，就是html⾥⾯基本没有什么代码，可能⼏个div，除去引⽤的js和css⽂件外 10⼏⾏就完事了，⽽很多内容都是下单独提出来放在⼀个js⽂件⾥⾯，下⾯就简单介绍⼀下这⼏天⽤ligerui完成table表格的渲染。
下⾯是效果图：
上图的html代码⾥⾯就仅仅只有2个div,⼀个div是上⾯查询条件的form，另外⼀个是下⾯的table，html代码如下:
<body >
<div id="form2"></div>前端ui框架是什么意思
<div id="maingrid4"></div>
</body>
body⾥⾯就2个div就可以了 ，前⾯说过它是通过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);
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":"刘红燕",
"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":"李志涛",
"accountspostingman":"李志涛",
"accountspostingdate":"2017-07-02",
"blankoutmane":"-",
"blankoutdate":"-",
"state":"过账"
}],
Total: 1
};
其实看代码也⾮常简单 仅仅是2个⽅法就可以完成 ligerForm和ligerGrid这2个对象。      columns：元素数组，
display：类似标题名称，
name：同html的name，
type：元素类型，
newline：是否换⾏，
还有⼀些同html⾥⾯⼤同⼩异的，⽐如width，height这些常⽤的属性。⽤起来也特别⽅⾯

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。