【layui__表格】layui表格的渲染、行点击事件

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', width: 200 }
                    , { field: 'Full_name', title: '用户名', width: 100 }
                    , { field: 'Mail', title: '邮箱', width: 200 }
                    //, { fixed: 'right', title: '操作', align: 'center', toolbar: '#toobar', width: '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>

posted @ 2020-04-25 19:16 一只桔子2233 阅读(3546) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

公告

昵称：一只桔子2233
园龄： 8年3个月
粉丝： 16
关注： 18

+加关注

2025年3月

日

一

二

三

四

五

六

Kikyo

纸上得来终觉浅，绝知此事要躬行。

【layui__表格】layui表格的渲染、行点击事件

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', width: 200 }
	, { field: 'Full_name', title: '用户名', width: 100 }
	, { field: 'Mail', title: '邮箱', width: 200 }
	//, { fixed: 'right', title: '操作', align: 'center', toolbar: '#toobar', width: '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>

Kikyo

纸上得来终觉浅，绝知此事要躬行。

【layui__表格】layui表格的渲染、行点击事件

layui表格渲染

table.render的elem使用的是table标签的id id="userTable"

table.reload使用的是渲染时定的渲染id id: 'searchID',

监听事件是使用的lay-filter="table"

公告

搜索

我的标签

随笔分类

随笔档案

阅读排行榜

最新评论

table.render的elem使用的是table标签的id `id="userTable"`

table.reload使用的是渲染时定的渲染id `id: 'searchID',`

监听事件是使用的`lay-filter="table"`