layui前端使用

表格呈现

html

js

layui.use(['table','form','jquery'], function(){
			var table = layui.table,
				$=layui.jquery;

			form = layui.form;

			lists = table.render({
				elem: '#test'
				,url:_server+'/admin/webmaster/PressRelease/lists'
				,toolbar: '#toolbarDemo'
				,title: '用户数据表'

				,parseData:function(res){
					return {
						"code": res.code,
						"msg": res.msg,
						"data": res.data.data,
						"total":res.data.total
					};
				},
				response: {
					statusName: 'code',
					statusCode: '200',
					msgName: 'msg',
					dataName:'data',
					countName:'total'
				}
				,cols: [[
					{field:'ID', title:'ID', align: 'center', sort: true}
					,{field:'标题', title:'标题', align: 'center'}
					,{field:'简述', title:'简述', align: 'center',templet:function (r) {
						let str = r.简述;
						return str.substring(0,10)
						}}
					,{field:'创建时间', title:'创建时间', align: 'center', sort: true,templet:"
{{layui.util.toDateString(d.update_time)}}
"}
					,{field:'是否显示', title:'是否显示', align: 'center',templet:function (d) {
						if (d.是否显示 ==1){
							return ''
						}else {
							return ''
						}


						}}
					,{field:'排序', title:'排序', align: 'center', sort: true}
					,{fixed: 'right', title:'操作', width:178, align:'center', toolbar: '#barDemo'}
				]]
				,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
					//,curr: 5 //设定初始在第 5 页
					,groups: 1 //只显示 1 个连续页码
					,first: false //不显示首页
					,last: false //不显示尾页

				}
			});

			//监听工具条

			table.on('tool(test)', function(obj){
				var data = obj.data;
				if(obj.event === 'edit'){
					$("#motaikunag input[name=name]").val(data.导航名称);
					$("#motaikunag input[name=sort]").val(data.位置);
					$("#motaikunag input[name=link]").val(data.URL);
					$("#nav_id").val(data.ID);
					/*$("#parent_id").val(data.父ID);*/
					if (data.是否显示 == 1){
						$("#motaikunag input[name=show][value='0']").prop("checked","false");
						$("#motaikunag input[name=show][value='1']").prop("checked","true");
					}else {
						$("#motaikunag input[name=show][value='1']").prop("checked","false");
						$("#motaikunag input[name=show][value='0']").prop("checked","true");
					}
					form.render();

					layer.open({
						type:1,//类型
						area:['800px','auto'],//定义宽和高
						title:'修改导航栏',//题目
						shadeClose:true,//点击遮罩层关闭
						content: $('#motaikunag'),//打开的内容
						end : function() {
							getQuaList();
						}
					});
				} else if(obj.event === 'del'){
					layer.confirm('真的删除行么', function(index){
						$.post(
							_server+"/admin/webmaster/Navigation/del",
							{"id":data.ID},
							function (res) {
								if (res.code==200){
									layer.msg("删除成功",{icon:1,time:2000},function () {
										lists.reload();
										layer.close(index);

									})

								}else {
									layer.msg("删除失败"+res.msg,{icon:2})
								}

							}
						)
					});
				}
			});
			table.on('toolbar(test)', function(obj){
				var data = obj.data;
				if (obj.event === 'getCheckData'){
					layer.open({
						type:1,//类型
						area:['800px','auto'],//定义宽和高
						title:'添加导航栏',//题目
						shadeClose:true,//点击遮罩层关闭
						content: $('#motaikunag'),//打开的内容
						end : function() {
							getQuaList();
						}

					});
				}
			});
		});