layui 学习笔记一：layui table 查询、新增、编...

@{ ViewBag.Title = ;}@section styles{ <link href= rel= />}<h2>TableGrid</h2><table id= lay-filter=></table>@section scripts{ <script src=></script> <script src=></script>}

; ( () { initQuery();}()); initQuery() { layui.use(['table'], function () {
$.post('/Test/TableGridQuery', {}, function (rsp) {
var table = layui.table,
tableId = 'tblInfo';
table.render({
id: tableId
, elem: '#' + tableId
, data: rsp.data
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{ field: 'P_NO', width: 100, title: '页面编号' }
, { field: 'P_NAME', width: 100, title: '页面名称' }
, { field: 'P_ROLE', width: 100, title: '页面角色' }
, { field: 'P_DESC', title: '页面说明' }
, { field: 'P_URL', width: 280, title: '页面URL' }
, {
fixed: 'right', width: 120, align: 'center', templet: function () {
return ' <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>';
}
}
]]
});

//监听数据操作
table.on('tool(' + tableId + ')', function (obj) {
var data = obj.data;
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
layer.msg('删除成功');
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit') {
showEdit(data);
}
});
}, 'json');
});}

[HttpPost] JsonResult TableGridQuery(){ ResultClass rc = ResultClass(); List<ResultClass1> rc1 = List<ResultClass1>(); ( i = ; i < ; i++) { rc1.Add( ResultClass1() { P_NO = i.ToString(), P_NAME = + i.ToString(), P_ROLE = + i.ToString(), P_DESC = + i.ToString(), P_URL = + i.ToString() }); } rc.data = rc1; rc.code = ; rc.count = rc1.Count; Json(rc);}

function initShowAdd() { $().click(function () { addHtml = <div =>\ <label =>编号</label>\ <div =>\ <input type= name= lay-verify= autocomplete= placeholder= =>\ </div>\ </div>\ <div =>\ <label =>名称</label>\ <div =>\ <input type= name= lay-verify= autocomplete= placeholder= =>\ </div>\ </div>\ <div =>\ <label =>角色</label>\ <div =>\ <input type= name= lay-verify= autocomplete= placeholder= =>\ </div>\ </div>\ <div =>\ <label=>描述</label>\ <div =>\ <input type= name= lay-verify= autocomplete= placeholder= =>\ </div>\ </div>\ <div =>\ <label=>URL</label>\ <div =>\ <input type= name= lay-verify= autocomplete= placeholder= =>\ </div>\ </div>\ </form> layer.open({ type: , title: , content: addHtml, area:[,], btn: [, ], yes: function (layIndex) { $().ajaxSubmit({ success: function (rsp) { (rsp && rsp.success === ) { layer.close(layIndex); oldData = layui.table.cache.tblInfo;//获得当前页面的原始数据 oldData.unshift(rsp.data);//在原始数据前添加新添加的数据 layui.table.reload(, { data: oldData });//把新处理的数据重新加载一下 layer.msg(); } { (rsp && rsp.message) { layer.alert(rsp.message); } { layer.alert(); } } } }); } }); });}

{ : , width: , align: , templet: function () { ; }}

table.on( + tableId + , function (obj) { data = obj.data; (obj. === ) { } (obj. === ) {

//

showEdit(data); //显示编辑对话框 }});

function showEdit(data) { editHtml = <div =>\ <label =>编号</label>\ <div =>\ <input type= name= lay-verify= value= autocomplete= placeholder= =>\ </div>\ </div>\ <div =>\ <label =>名称</label>\ <div =>\ <input type= name= value= lay-verify= autocomplete=placeholder= =>\ </div>\ </div>\ <div=>\ <label =>角色</label>\ <div=>\ <input type= name= value= lay-verify= autocomplete= placeholder= =>\ </div>\ </div>\ <div =>\ <label =>描述</label>\ <div =>\ <input type= name= value= lay-verify= autocomplete= placeholder= =>\ </div>\ </div>\ <div =>\ <label =>URL</label>\ <div =>\ <input type=name= value= lay-verify= autocomplete= placeholder= =>\ </div>\ </div>\ </form> layer.open({ type: , title: , content: editHtml, area: [, ], btn: [, ], yes: function (layIndex) { $().ajaxSubmit({ success: function (rsp) { (rsp && rsp.success === ) { layer.close(layIndex); oldData = layui.table.cache.tblInfo; len = oldData.length; ( i = ; i < len; i++) { (oldData.P_NO == rsp.data.P_NO) { oldData = rsp.data;

break

; } }

//

重新加一下数据

layui.table.reload(

'

tblInfo

'

, { data: oldData }); layer.msg(

'

提交成功

'

); }

else

{

if

(rsp && rsp.message) { layer.alert(rsp.message); }

else

{ layer.alert(

'

提交失败

'

); } } } }); } });}

[url=]

[/url]