layui表格渲染
table.render的elem使用的是table标签的id id="userTable"
table.reload使用的是渲染时定的渲染id id: 'searchID',
监听事件是使用的lay-filter="table"
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="user_select.aspx.cs" Inherits="Conference.admin.resources_manager.user_select" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../../js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="../../js/plugins/my/kikyoUtils.js"></script>
<script type="text/javascript" src="../../js/plugins/my/public.js"></script>
<link href="/js/plugins/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" media="all" />
<script src="/js/plugins/layui-v2.5.6/layui/layui.js"></script>
</head>
<body>
<form name="form" class="layui-form " style="margin-top: 20px;" method="post" action="">
<div class="layui-elem-quote">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">已选姓名</label>
<input type="hidden" name="user_code" id="user_code" />
<div class="layui-input-block">
<input type="text" name="user_name" id="user_name" maxlength="100" readonly="readOnly"
autocomplete="off" class="layui-input" />
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">查询姓名</label>
<div class="layui-input-block">
<input type="text" name="fullName" id="fullName" autocomplete="off" class="layui-input" />
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-normal" type="button" id="user_Select">搜索</button>
</div>
</div>
</div>
</form>
<table class="layui-hide" id="userTable" lay-filter="table"></table>
<script>
layui.use(['form', 'layedit', 'laydate', 'jquery', 'table', 'element'], function () {
var $ = layui.jquery;
var table = layui.table;
table.render({
elem: '#userTable',
url: '/AjaxResponse/tv_live_playHandler.ashx?type=selectByFullName',
method: 'POST', //方式
page: true,//是否开启分页
limits: [10, 20, 30, 60, 90, 100],
limit: 10, //默认采用20
cellMinWidth: 200,
even: true, //开启隔行背景
id: 'searchID',
done: function (res, curr, count) { },
cols: [[
{ field: 'User_code', title: 'ID', 200 }
, { field: 'Full_name', title: '用户名', 100 }
, { field: 'Mail', title: '邮箱', 200 }
//, { fixed: 'right', title: '操作', align: 'center', toolbar: '#toobar', '200' }
]]
});
$('button#user_Select').on('click', function () {
table.reload('searchID', {
where: { fullName: $("#fullName").val() }
});
});
//监听行双击事件
table.on('rowDouble(table)', function (obj) {
console.log("===========rowDouble ");
console.log(obj);
$("#user_code").val(obj.data.User_code);
$("#user_name").val(obj.data.Full_name)
});
});
</script>
<script type="text/html" id="toobar">
<a class="layui-btn layui-btn-xs" lay-event="select2">选择</a>
</script>
</body>
</html>