layui 数据表格怎么给列添加自定义的事件

2023-02-21 07:47:02html-css016

layui 数据表格怎么给列添加自定义的事件,第1张

第一步在我们的电脑上打开软件，新建一个html，并添加上layui的js和css文件，如下图所示：

第二步我们打开新建的html文件,在<head>标签里面引入layui.css，layui.js文件，如下图所示：

第三步我们开始写body页面内容，这里给的表格内容是layui的表格示例数据，如下图所示：

第四步我们最后来给表格数据添加点击事件，table.on('tool(demoEvent)', function(obj){}来监听单元格事件，layer.prompt()弹出框，使用 obj.update({ sign: value })进行更新表格和缓存，如下图所示：

第五步我们在浏览器中打开html页面，可以看到表格数据内容，如下图所示：

第六步我们点击表格数据内容，弹出框显示单元格里面的数据，可以看到通过layui，给表格数据添加了点击事件，如下图所示：

js如下：

///<reference path="jquery-1.8.0.min.js" />

//加载函数

$(function () {

Nbook.load()

})

var Nbook =

{

load: function () {

Nbook.clci()

selectDat: function () {

var val

$.ajax({

type: "post",

dataType: "json",

data: { "method": "selectData", "Name": "'" + $.trim($("#Name").val())+"'" },

url: "ashx/test.ashx",

success: function (data) {

if (data != null) {

var html = ""

val = eval(data)

//console.log(book.length)

//for (var i = 0i <book.lengthi++) {

// html += "<ul class='main_Ul'><li>" + book[i].name + "</li><li>" + book[i].sch_id + "</li><li>" + book[i].sex + "</li><li>" + book[i].isOk + "</li></ul>"

//}

//$(".main").html(html)

layui.use('table', function () {

var table = layui.table

//展示已知数据

table.render({

elem: '#socialList'

, cols: [[ //表头

{ type: 'checkbox', fixed: 'left' },

{ field: 'name', title: '姓名', sort: true, fixed: 'left', unresize: true, sort: true, totalRowText: '合计' }

, { field: 'sch_id', title: '学校ID', sort: true, totalRow: true }

, { field: 'sex', title: '性别', sort: true, totalRow: true }

, { field: 'isOk', title: '是否OK' }

]],

data: val

, even: true

, page: true //是否显示分页

, toolbar: true //开启工具栏，此处显示默认图标，可以自定义模板，详见文档

, limits: [3, 5, 7, 8, 10, 50]

, limit: 8 //每页默认显示的数量

, cellMinWidth: 80

, height: 'full-515'//设置表格最大高度

, totalRow: true//开启合计

})

}

})

clci: function ()

{

if ($.trim($("#Name").val()) == "")

{

Nbook.selectDat()

}

$("input[type='button']").click(function () {

Nbook.selectDat()

})

}

页面如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="myselect.aspx.cs" Inherits="WebTest.Demos.myselect" %>

<!DOCTYPE html>

* {

margin: 0

padding: 0

}

.main {

width: 100%

height: auto

border: 1px solid #DEDEDE

}

.main_Ul {

float: left

width: 100%

height: auto

border: 1px solid #DEDEDE

list-style: none

}

.main_Ul li {

float: left

width: 15%

height: 25px

border-right: 1px solid #DEDEDE

}

</style>

</head>

<body>

搜索ID：

</div>

</div>

</form>

</body>

</html>

一般处理程序如下：

using Models

using Newtonsoft.Json

using SqlSugar

using System.Linq

using System.Web

using WebTest.Dao

namespace WebTest.Demos.ashx

{

/// <summary>

/// test 的摘要说明

/// </summary>

public class test : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain"

string method = context.Request.Form["method"]

string names = context.Request.Form["Name"]

//names=names != string.Empty ? names : "(1==1)"

var JsonString = string.Empty

if (method == "selectData")

{

using (var db = SugarDao.GetInstance())

{

//.Where(i =>i.name == names)

var student = db.Queryable<Student>().ToList()

#region 查询数据

JsonString = "["

//lambda写法

for (int i = 0i <student.Counti++)

{

JsonString += "{"

JsonString += "\"name\":\"" + student[i].name + "\",\"sch_id\":\"" + student[i].sch_id + "\",\"sex\":\"" + student[i].sex + "\",\"isOk\":\"" + student[i].isOk + "\""

JsonString = (i == student.Count - 1) ? JsonString += "}" : JsonString += "},"

}

JsonString += "]"

#endregion

object jsonob = JsonConvert.SerializeObject(JsonString)

context.Response.Write(jsonob)

}

public bool IsReusable

{

get

{

return false