///<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=""
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）