zoukankan      html  css  js  c++  java
  • .net mvc 框架实现后台管理系统 2

    layui 数据表格

    返回格式:

    var json = new
    {
    code = 0,
    count = pagers.totalRows,
    msg = "",
    data =null

    };

    请求格式:

    table.render({
    elem: '#SysSampleIndexTable'
    , url: '/SysSample/GetList'
    , method: "post"
    //, cellMinWidth: 55 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
    , cols: [[
    { type: 'checkbox' }
    , { field: 'id', title: 'ID', sort: true, hide: true }
    , { field: 'Name', title: '用户名' }
    , { field: 'Age', title: '年龄', sort: true }
    , { field: 'Bir', title: '生日', hide: true }
    , { field: 'Note', title: '简介' } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
    , { field: 'Photo', title: '图片', sort: true, hide: true }
    , { field: 'CreateTime', title: '创建时间' }
    , { fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 160 }
    ]]
    , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
    //,curr: 5 //设定初始在第 5 页
    , groups: 3 //只显示 1 个连续页码
    , first: '首页' //不显示首页
    , last: '尾页' //不显示尾页

    }
    , limit: 6
    , limits: [6, 10, 20, 30, 50, 100]
    , where: {//条件
    id: queryStr
    //,sort:'CreateTime'//排序字段
    }
    //, request: {//请求参数
    // pageName: 'page' //页码的参数名称,默认:page
    // , limitName: 'limit' //每页数据量的参数名,默认:limit
    //}
    //, response: {//返回参数
    //statusName: 'status' //规定数据状态的字段名称,默认:code
    //, statusCode: 200 //规定成功的状态码,默认:0
    //, msgName: 'hint' //规定状态信息的字段名称,默认:msg
    //, countName: 'total' //规定数据总数的字段名称,默认:count
    //, dataName: 'rows' //规定数据列表的字段名称,默认:data
    //}
    //,initSort: {
    // field: 'id' //排序字段,对应 cols 设定的各字段名
    // , type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
    //}
    })

    layui 表格工具栏:

    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="details">详情</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    table.on('tool(SysSampleIndexTable)', function (obj) {
    //调试 -> console.log(obj)
    var id = obj.data.id;

    if (obj.event === 'del') {
    layer.confirm('@Suggestion.YouWantToDeleteTheSelectedRecords', function (index) {
    //obj.del();

    //post请求删除
    $.post('/SysSample/Delete', { "id": id }, function (Result) {
    //提示成功或失败
    if (Result.type = 1) {
    layer.msg('@Suggestion.DeleteSucceed', {
    offset: 'rb',
    icon: 1,
    })
    }
    else {
    layer.msg('@Suggestion.DeleteFail', {
    offset: 'rb',
    icon: 1,
    })
    }
    initTable("");


    }, 'json');

    layer.close(index);
    });
    } else if (obj.event === 'edit') {
    layer.open({
    type: 2,
    title: '编辑',
    maxmin: true,
    shade: 0.8,
    area: ['450px', '90%'],
    content: '/SysSample/Edit?id=' + encodeURI(id) //iframe的url});
    })
    }
    else if (obj.event === "details") {//详情页
    layer.open({
    type: 2,
    title: '详情',
    maxmin: true,
    shade: 0.8,
    area: ['450px', '90%'],
    content: '/SysSample/Details?id=' + id //iframe的url});
    })
    }
    });

  • 相关阅读:
    Python-TXT文本操作
    Appium-处理系统弹窗
    Appium-服务关键字
    App Inspector-iOS真机功能详解
    Appium+Python3+iOS真机环境搭建
    Appium-超过60s的应用场景如何处理
    python-入门的第一个爬虫例子
    Mysql(五) JDBC
    Mysql(四)正则表达式
    Mysql(三)约束
  • 原文地址:https://www.cnblogs.com/newrohlzy/p/9973852.html
Copyright © 2011-2022 走看看