写在前面的话:
Layui也许不是最好的一个ui,但是,简单即是美,在这方面,layui无疑是极其优秀的,而黑鸟我,最近一直在使用贤心的这套ui,
因为做得多了,不喜欢一些常用的功能被反复的使用,因此,封装了一个创建table的功能,很简单,希望能给初学者们提供一点帮助。
暂时只是一个简单的table功能,其中的创建页码的功能也可单独使用。
需注意,在使用该js前需引用 Layui (猛点这个超链接去官网下载),还需要引用我编写的js文件,继续猛点击 LayuiHelp.js
2017-02-24
相较于上次,本次修复了一个在创建页码时的bug,给出了较为详细的使用Demo,当然,此次依旧是一个简单的创建table的demo
先睹为快:
主要的Demo代码
<div id="Table" style="margin-left: 25%;"> </div>
//实例化一个表格控件对象
var thisTable = Table_Layui;
function SelectDataByPageIndex(PageIndex) {
//每次查询获得的数据集--当前页的数据
var Data = [
{ Name: "张三", Sex: "1", Age: "15" },
{ Name: "李四", Sex: "1", Age: "18" },
{ Name: "王五", Sex: "1", Age: "26" },
{ Name: "韩梅梅", Sex: "0", Age: "16" }
];
thisTable.SumDateCounte = 100;//总数据的行数
thisTable.data = Data;
thisTable.PageIndex = PageIndex;//当前页码
thisTable.CreateTableFrame();//创建table
}
//编辑方法
function Edit(index) {
var json = Table_Layui.GetRowData(index);
alert("有数据集了,自己处理编辑事件哦");
}
//删除方法
function Delete(index) {
var json = Table_Layui.GetRowData(index);
alert("我要放大招了,小心点!");
}
//表格控件初始化设置
function TableOnit() {
thisTable.TablePanel = "Table";
thisTable.Edit = Edit;
thisTable.Delete = Delete;
thisTable.SelectDataByPageIndex = SelectDataByPageIndex;
thisTable.Column = [
{ txtName: "姓名", ValueCode: "Name", width: 80 },
{ txtName: "性别",
ValueCode: "Sex",
width: 80,
ValueDeal: function (value) {
if (value == 0) {
return "女";
} else {
return "男";
}
return value;
}
},
{ txtName: "年龄", ValueCode: "Age", width: 80 }
];
}
$(function () {
TableOnit(); //初始化表格
SelectDataByPageIndex(1);//初始化查询
})