//加载函数 ...">
美文网首页
c# layui 动态表格进行动态赋值

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

作者: 青木川_ | 来源:发表于2019-03-14 17:45 被阅读2次

    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 = 0; i < book.length; i++) {

                        //    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/html; charset=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 = 0; i < student.Count; i++)

                        {

                            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;

                }

            }

        }

    }

    相关文章

      网友评论

          本文标题:c# layui 动态表格进行动态赋值

          本文链接:https://www.haomeiwen.com/subject/vgmcmqtx.html