程序帝国四大操作之单表查询数据库数据

完整的单表查询数据库数据

开发工具与关键技术：Visual Studio 

撰写时间：7月6号  

作者：  曾子千  

我们如果弄个动态表格，让表格随着数据库的变动起来，这该怎么做？其实这非常简单就可以实现了，只需要几个步骤，几句代码就可实现！下面这是一个简单的单表查询表格数据！

一、HTML页面布局

1、首先我们把下载好的Css插件包含在项目文档里，再从解决方案里引入需要用到的Css样式到你所要操作的页面里面，如下：
<link href="~/Plugins/layui/layui.css"rel=“stylesheet” />
注释：Css文件引用一般来说是引用到HTML页面布局的上方，也就是标题的下方位置

2、在HTML页面布局这边构建一个表格的属性样式和你想要在表格中显示的字段：

<tableid="绑定具体的数据" lay-filter="绑定具体的数据">         

注释：这里的绑定具体的数据命名是随便命名的，如果不好记，或者你可以把你现在要建的数据表格里用到的数据库里面的表的名称写上去，这样就挺好记了！！！

3、同上面一样我们把下载好的layui的Js插件包含在项目文档里，再从解决方案里引入需要用到的Js样式到你要操作的页面里面，如下：

<script src="~/Plugins/layui/layui.js"></script>

注释：Js文件引用最好引用到HTML页面布局的下方，放在页面布局可能很容易发生冲突或者无响应！！！

4、写表格布局js样式，用来接收控制器的传输过来的数据

var tabRawmaterial;//bsgrid的 表格

var layer, layuiTable;//保存layui模块以便全局使用Rawmaterial

var layerIndex;

$(function () {

//方法渲染

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

      layer = layui.layer,

      layuiTable = layui.table;

	 //执行渲染//第一个实例

	tabRawmaterial
       = layuiTable.render({

       elem: '#tabRawmaterial',//指定原始表格元素选择器（推荐id选择器）

       url: '/KucunGuanli/Supplier/SelectRawmaterial',//数据接口

       cols: [[ //表头

       { type: 'radio', fixed: 'left' },//单选框列,fixed:'left' 将列固定在左边

       { type: 'numbers', title: '序号',  },//序号列，title设定标题名称

       { field: 'RawmaterialID', title: 'RawmaterialID', hide: true, align: 'center' },//hide:true 隐藏列+

        { field: 'RawNumber', title: '编号', align: 'center' },

        { field: 'Rawmaterial', title: '类别', align: 'center' },

        { title: '操作', templet:
        
        setOperate, width: 300, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式

  ]],

 data: []

 });

二、控制器代码，查询数据库里的数据传到页面代码表格里接收：

//查询原料信息

public ActionResult SelectRawmaterial(LayuiTablePage layuiTablePage)

{//获取总行数

int AcademeCount = (from tbRawmaterial in
myModel.B_Rawmaterial

select tbRawmaterial).Count();

//获取显示数据

List<B_Rawmaterial> AcademeData =

(from tbRawmaterial inmyModel.B_Rawmaterial

orderby tbRawmaterial.RawmaterialID descending//倒叙排序
select tbRawmaterial)
.Skip(layuiTablePage.GetStartIndex())//开始的索引

.Take(layuiTablePage.limit).ToList();//获取总条数

//用自己构造的实体类接收List

LayuiTableData<B_Rawmaterial> layuiTableData= new LayuiTableData<B_Rawmaterial>();

layuiTableData.count= AcademeCount;

layuiTableData.data= AcademeData;

return Json(layuiTableData, JsonRequestBehavior.AllowGet);

}

三、最终成图：