亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

原文轉(zhuǎn)載地址：http://www.mamicode.com/info-detail-2539217.html
標(biāo)簽：tail url 技術(shù) esc 去掉 屬性 == 對象 orm

上次做table有些東西 忘記了 這次當(dāng)作來個分析總結(jié)一下 跟大家共同學(xué)習(xí)

閑話不多說 直接上例子 技術(shù)分享圖片

代碼：

<form id="form1" runat="server">
<div>
<table id="demo" lay-filter="test"></table>
</div>
</form>

<script>
//*layuitable初始化代碼**
layui.use(‘table‘, function () {
var table = layui.table;
table.render({
elem: ‘#demo‘
, height: 500
, url: ‘/GetDataForLayuiTableLearning.ashx‘ //數(shù)據(jù)接口
, page: true //開啟分頁
, cols: [[ //表頭
{ field: ‘ID‘, title: ‘ID‘, sort: true, unresize: true }
, { field: ‘starttime‘, title: ‘開始時間‘, unresize: true}



, { field: ‘a(chǎn)ddtime‘, title: ‘添加時間‘, unresize: true }
, { field: ‘DeScore‘, title: ‘得分‘, unresize: true }
]]
});
});
//*layuitable初始化代碼**

</script>

第一個表格完成了 但是可以看到時間格式多了一個很奇怪的T 原因是微軟默認json化的datetime格式 所以后臺做小小改動就ok

后臺代碼處理時間格式帶有T的問題

IsoDateTimeConverter iso = new IsoDateTimeConverter();
iso.DateTimeFormat = “yyyy-MM-dd HH:mm:ss”;
var ajson = JsonConvert.SerializeObject(dt, iso);
JArray jar = JArray.Parse(ajson);

ok 看效果

技術(shù)分享圖片接下來介紹幾個比較常用的table參數(shù)。

第一個：toolbar參數(shù) 開啟表格頭部工具欄區(qū)域 （綁定列工具條） 官網(wǎng)解釋：通常你需要在表格的每一行加上 查看、編輯、刪除 這樣類似的操作按鈕，而 tool 參數(shù)就是為此而生，你因此可以非常便捷地實現(xiàn)各種操作功能。

html代碼：

<form id="form1" runat="server">
<div>
<table id="demo" lay-filter="test"></table>
</div>
</form>

<script>
//*layuitable初始化代碼**
layui.use(‘table‘, function () {
var table = layui.table;
table.render({
elem: ‘#demo‘
, height: 500
, url: ‘/GetDataForLayuiTableLearning.ashx‘ //數(shù)據(jù)接口
, page: true //開啟分頁
, cols: [[ //表頭
{ field: ‘ID‘, title: ‘ID‘, sort: true, unresize: true }
, { field: ‘starttime‘, title: ‘開始時間‘, unresize: true }
, { field: ‘a(chǎn)ddtime‘, title: ‘添加時間‘, unresize: true }
, { field: ‘DeScore‘, title: ‘得分‘, unresize: true }
, { align: ‘center‘,title: ‘操作‘, toolbar: ‘#barDemo‘ }
]]
});
});
//*layuitable初始化代碼**

</script>

<script type="text/html" id="barDemo">
<%— *工具欄綁定代碼**—%>
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
<%— *工具欄綁定代碼**—%>
</script>重點在于首先聲明一個列，用來作為工具列的列名： , { align: ‘center‘,title: ‘操作‘, toolbar: ‘#barDemo‘ } 列名為操作

然后 再script html代碼中 為我們的toobar列給定造型和樣式：

<script type="text/html" id="barDemo">
<%— *工具欄綁定代碼**—%>
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
<%— *工具欄綁定代碼**—%>
</script>

效果如下：

技術(shù)分享圖片

接下來我們看看toorbar如何 實現(xiàn)操作的。

直接上代碼：

table.on(‘tool(test)‘, function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter=”對應(yīng)的值”
var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)
var layEvent = obj.event; //獲得 lay-event 對應(yīng)的值（也可以是表頭的 event 參數(shù)對應(yīng)的值）
var tr = obj.tr; //獲得當(dāng)前行 tr 的DOM對象

if (layEvent === ‘detail‘) { //查看
layer.msg(“您點擊了查看按鈕！”,{time: 5000})
} else if (layEvent === ‘del‘) { //刪除
layer.confirm(‘真的刪除行么‘, function (index) {
layer.msg(“您選擇了刪除！”,{time: 5000});
});
} else if (layEvent === ‘edit‘) { //編輯
layer.msg(“您選擇了編輯按鈕！”,{time: 5000})
}
});

tableon加上工具條 注意 注意 注意 這里table.on(‘tool(test)‘綁定的這個test是指table的lay-filter=”test” 然后 你在相應(yīng)的位置（我彈出消息的位置寫上你相應(yīng)的操作代碼就完成了）

接下來看效果

點擊查看：

技術(shù)分享圖片

點擊編輯：

技術(shù)分享圖片

點擊刪除：

技術(shù)分享圖片

每一行所有你想獲取的數(shù)據(jù)都可以獲得 只要后臺返回了 即使你沒有在列中顯示他 你也可以得到 現(xiàn)在我們?nèi)サ舻梅诌@一列

點擊編輯 依然可以得到積分

技術(shù)分享圖片

假如要對積分進行 區(qū)分 比如什么 普通會員 黃金會員 磚石會員 白金會員 等 看操作

技術(shù)分享圖片

代碼：

<%— **列數(shù)據(jù)顯示做顯示改變*—%>

<script type="text/html" id="DeScore">
{{# if(d.DeScore < 10){ }}
積分：{{d.DeScore}}— 普通會員
{{# } else { }}
積分：{{d.DeScore}}—黃金會員
{{# } }}
</script>
<%— **列數(shù)據(jù)顯示做顯示改變*—%>

基本都寫完了 其它就是是一個我們對表格的搜索功能了 和表格的重載放一起講了 這是同一個功能

function searcha() {
var data = {
score: $(“#score”).val()
}
layui.table.reload(“demo”, { where: data });
}

表格重載的寫法 則例的where是除了limit 和page以為的參數(shù)（limit 和page layui默認會傳入 10 和1）

前臺：

<div class="layui-form-item">
<label class="layui-form-label">積分</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" class="layui-input" id="score">
</div>
</div>

可以看到score已經(jīng)傳入后臺了 后臺sql做相應(yīng)查詢就ok了