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

            }

        }

    }

}

用什么标签不重要,只要样式用对了,都能出效果,用ul里面嵌套li与div嵌套div是一样的,注意里面子项里面要加一个<a></a>不然点击没效果

如果不加载element模块,也没有效果

(在页面中有很多元素需要自动去完成一些处理,譬如导航菜单的小滑块、Tab的切换 *** 作,他们往往不需要去单独调用一个方法来开启一项功能,而页面上恰恰有太多这样的小交互,所以我们统一归类为element组件)

相关样式

1、方向

(1)水平:默认的

(2)垂直:layui-nav-tree

2、其他样式

(1) layui-nav :代表这是一个导航菜单

(2) layui-nav-item :放在(1)的子标签中,代表这个导航菜单的一个子项

(3) lay-this :和(2)同级,代表当前选中的菜单项

(4) layui-nav-child :子项的子项

(5) layui-nav-img :会以导航合适的大小处理图片

导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。

1、风格说明

默认风格:只需要加layui-tab

简洁风格:再追加上layui-tab-brief

卡片风格:再追加上layui-tab-card

2、相关样式

layui-tab:代表这是一个选项卡

(1)layui-tab-title:选项卡的头

【1】layui-tab-this:选中该选项卡

(2)layui-tab-content:选项卡的内容

【1】layui-tab-item:一个选项卡头对应的具体内容

【2】layui-tab-show:表示初始显示,一般哪个头上加了layui-tab-this,它对应的content就加上layui-tab-show

3、相关属性

lay-allowclose="true":是否开启关闭按钮

lay-filter="demo":用来在方法中唯一确定一个layui组件

lay-id="1":用来配合lay-filter属性唯一确定一个子组件

4、相关方法

element.tabAdd(filter, options):用于新增一个Tab选项

option示例:

{

title: '选项卡的标题'

,content: '选项卡的内容' //支持传入html

,id: '选项卡标题的lay-id属性值'

}

element.tabDelete(filter, layid):用于删除指定的Tab选项

element.tabChange(filter, layid):用于外部切换到指定的Tab项上

进度条进度条可应用于许多业务场景,如任务完成进度、loading等等,是一种较为直观的表达元素。

相关样式:

layui-progress:表示这是一个进度条

layui-progress-bar:表示进度条中的进度,依靠其lay-percent属性的值来控制进度大小,值取值范围0-100%

layui-bg-red/green/...:表示进度条的颜色

layui-progress-big:表示大尺寸进度条

相关属性:

lay-percent="80%":代表具体的进度

lay-showpercent="true":是否显示百分比数字

进度条的宽度是 100% 适配于它的父级元素

一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等(同样依赖element)

1、卡片面板

相关样式:

layui-row:代表一行

layui-col-space15:space0-space30,代表卡片之间的间距

layui-colmd5:md1-12,代表当前卡片占整行的列数

layui-card:代表一个卡片

layui-card-header:代表卡片头信息

layui-card-body:代表卡片内容样式

2、普通折叠面板

相关样式:

layui-collapse:代表一个折叠面板

layui-colla-item:代表一个折叠项

layui-colla-title:代表一个折叠项的标题

layui-colla-content:代表一个折叠项展开s的内容

layui-show:是否展开

相关事件:

3、手风琴面板

在普通折叠面板的基础上加上lay-accordion=""


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存