数据表格
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Visual Studio 2015、table数据表格
作者：梁柏源
撰写时间：2019/5/15
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在ASP.NET.MVC中，一般要实现增添，删减，查询以及修改数据，前提都要有一个数据表格来让我们使用。
创建数据表格其实很简单，只要在页面上放置一个table元素就行，具体的就这样<table id=”demo”></table>，其中demo是自己定义的类，当然如果只有一个数据表格时，也可以不改。接着就是通过table.render()这个方法指定该数据表格的容器。
接下来让我演示一下代码：
<html>
<head>
<meta charset="utf-8">
<title>table数据表格的演示</title>
<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
//源插件是这个<link href="/layui/css/layui.css" rel="stylesheet" />
//前面~/Plugins是我放置的路径，这大家应该都懂，这里提醒一下。
</head>
<body>//这里可以直接在body里面写<table>,不一定要写div
<div class="row">
<div class="col">
@*构建表格*@
<table id="dome" lay-filter="dome"></table>
</div>
</div>
<script src="~/Plugins/layui/layui.js"></script>
<script>
var dome;
var layer,layuiTable;//保存拉伊模块以便全局使用。//在ASP.NET.MVC中所有标点符号都是英文状态的，注释随意，因为这里代码不是粘贴过来的，可能有时没注意会用到中文的标点符号
$(function () {
//方法渲染
layui.use(['layer', 'table'], function () {
//赋值,赋值是必须的，没有什么为什么
layuiTable = layui.table;
layer = layui.layer,
// 执行渲染
tabMarketDetail = layuiTable.render({
elem: "#dome",//html表格id
url: "/RoutineManagement/Reception/SalesQuery",//数据接口
cols: [[ //表头
{ type: 'checkbox', fixed: 'left' },//复选框列,fixed:'left' 将列固定在左边//当然也不是必要的，如果不需要就删掉就好了
{ type: 'numbers', title: '序号' },//序号列，title设定标题名称
{ field: '', title: 'MarketDetailID', hide: true },//hide:true 隐藏列
{ field: 'CommodityNumber', title: '商品编码(条码)'， align: 'center' },
{ field: 'CommodityName', title: '商品名称' ， align: 'center'},
{ field: 'StyleNumber', title: '款号'， align: 'center' },
{ field: 'ColourName', title: '颜色', align: 'center' },
{ field: 'SizeName', title: '尺码'， align: 'center' },
{ field: 'DropPrice', title: '吊牌价'， align: 'center' },
{ field: 'UnitName', title: '单位'， align: 'center' },
{ field: 'Discount', title: '折扣'， align: 'center' },
{ field: 'Amount', title: '数量'， align: 'center' },
{ field: 'SalesPrice', title: '销售价', align: 'center' },
{ field: 'TotalMoney', title: '合计金额'， align: 'center' },
{ field: 'Remark', title: '备注'， align: 'center' }
]],// align: 'center'居中效果
page: {
limit: 10,//指定每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
}, //开启分页
data: [],//加载本地数据
});
//监听行单击事件
//单击事件 row ，双击事件 rowDouble
layuiTable.on('row(dome)', function (obj) {
var data = obj.data;//获取点击行数据
//标注选中样式
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
//***单击选中单选框
obj.tr.find('div.layui-unselect.layui-form-radio')[1].click();
//***单击选中/取消复选框
obj.tr.find('div.layui-unselect.layui-form-checkbox')[0].click();
});
});
})</script>
</body>
这样一个数据表格就建好了，如果你想在数据表格中加上一些其他的东西的话，列如：
button按钮，你可以在数据列上再加多一项:
{ title: '操作', templet: buttons, align: 'center', fixed: 'right' }
如果你觉得宽度不够的话，就在里面加个width，就像这样：
{ title: '操作', templet: buttons, align: 'center', fixed: 'right'，width：160 }
接下来就可以添加按钮了：
function buttons(data) {
var ademeId = data.AdemeID;//数据类型id
var btns = "";
btns += '<button type="button" class="layui-btn layui-btn-xs" οnclick=openUpdate(' + ademeId + ')>修改</button>';
btns += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" οnclick=saveDelete(' + ademeId + ')>删除</button>';
return btns;
}
就这样，button按钮就加好了。
下面又是看图的时候了，这就是今天的数据表格啦：
嗯！因为没有引入数据库，和编写查询，所以是没有数据的。
1076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
