c# layui 动态表格进行动态赋值

c# layui 动态表格进行动态赋值,第1张

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

    <link href="layui-v2.4.5/layui/css/layui.css" type="text/css" rel="stylesheet" />

    <title></title>

    <style type="text/css">

        * {

            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>

    <form id="form1" runat="server">

        <div class="layui-row">

            <div class="demoTable">

                搜索ID:

                <div class="layui-inline">

                    <input class="layui-input" name="Name" type="text" id="Name" value="" />

                </div>

                <input type="button" class="layui-btn btn" value="搜索" />

            </div>

        </div>

        <table class="layui-hide" id="socialList" lay-filter="socialList"></table>

    </form>

    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="layui-v2.4.5/layui/layui.js"></script>

    <script type="text/javascript" src="myselect.js"></script>

</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

            }

        }

    }

}

layui获取复选框checkbox的值

不多说了,直接上代码:

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>layui.form.checkbox 获取选中</title>

<link rel="stylesheet" href="layui/css/layui.css" media="all">

</head>

<body>

<form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->

  <div class="layui-form-item">

    <label class="layui-form-label">复选框</label>

    <div class="layui-input-block">

      <input type="checkbox" name="CSDN" lay-filter="like" title="复选框一" value="dongsir">

      <input type="checkbox" name="CSDN" lay-filter="like" title="复选框二" value="董先生">

    </div>

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">开关关</label>

    <div class="layui-input-block">

      <input type="checkbox" name="switch" lay-skin="switch" value="董辉">

    </div>

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">开关开</label>

    <div class="layui-input-block">

      <input type="checkbox" name="switch" checked lay-skin="switch" value="董先生的CSDN">

    </div>

  </div>

  <div class="layui-form-item">

    <div class="layui-input-block">

      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>

    </div>

  </div>

</form>

<script src="layui/layui.js"></script>

JS

layui获取复选框checkbox的值

当然,你也可以将数组转为字符串等等,详见代码:

layui获取复选框checkbox的值


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11570683.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存