Layui数据表格以及数据初始化

一. 首先我今天要介绍的就是平时我用的layui框架,使用插件能让我减少代码量和提高速率。以下则是我用layui数据表格以及数据初始化的代码,需要引用这个layui插件,引用完就是需要一个table来封装数据。

如下图所示:
Layui数据表格以及数据初始化_第1张图片

在使用该插件写数据表格时,我们需要加载他的模块化方法加载完成就开始表格初始化。首先我们要获取到表格的ID(tabDspeake),声明一个变量把它赋值给layuiTable初始化。第一个参数elem为绑定这个表格,第二个参数url为查询路径,第三个参数时cols为表头栏

Layui数据表格以及数据初始化_第2张图片

$(function(){

layui.use(['layer', 'table'], function () {



            layer = layui.layer;

            layuiTable = layui.table;

                //用户表

                tabDspeake =
layuiTable.render({

                    elem: '#tabDspeake',

                    url:
"/DoctorManage/Dorctor/DoctormaGetion",

                    cols: [[

 

                       { field: 'Nowtime',
title: '开嘱时间', align: 'center' },

                       { type: 'numbers',
title: '序号' },

                       { field:
'DoctoradviceDetailID', title: 'DoctoradviceDetailID', hide: true },//医嘱明细id

                       { field:
'DoctoradviceItemID', title: 'DoctoradviceItemID', hide: true },//医嘱项目id

                       { field: 'XMDrugNumber',
title: '项目编码', align: 'center' },

                       { field: 'XMDrugName',
title: '项目名称', align: 'center' },

                       { field:
'XMSpecification', title: '规格',
align: 'center' },

                       { field: 'Uselevel',
title: '每次量', align: 'center' },

                       { field: 'XMFrequency',
title: '频率', align: 'center' },

                       { field: 'Pharemacy',
title: '用法', align: 'center' },

                       { field: 'Money', title:
'价格', align: 'center' },

                       { field: 'Pharemacy',
title: '总金额', align: 'center' },

                       { field: 'DisCount',
title: '折后价', align: 'center' },

                       { field:
'StartEnjointime', title: '开嘱时间', align: 'center' },

                       { field:
'StopEnjointime', title: '停嘱时间', align: 'center' },

                       { title: '类型', templet: setState },//长嘱否

                    ]],

                    page: {

                        limit: 10,//指定每页显示的条数

                        limits: [5, 10, 15, 20,
25, 30, 35, 40, 45, 50],//每页条数的选择项

                    }, //开启分页

                    data: [],

                });

});

那么就开始要写控制器那边的查询方法,这主要涉及到查询和封装table数据,把查询到的数据进行分页最后返回到页面。

   public Action

Result DoctormaGetion (LayuiPage
layuiPage){

  List<实体类> listStudent = (from a in myModels.A

                      join b in myModels.B on a.id
equals b.id

                      select new 实体类{

数据………

});

//计算总条数

//分页数据          

//实例化      

//返回值

  return Json(layuiTableData, JsonRequestBehavior.AllowGet);

}  

在这里插入图片描述

你可能感兴趣的:(MVC)