MVC+EasyUI实现查询显示到对应表格

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这里要说的显示界面是Razor页面。我们要使用easyui首先应该在界面中加入对应的引用，例如以下代码，这些都是必要的引用文件，能够依据自己所存放的路径来加入src地址。

@*加入Jquery EasyUI的样式*@

<linkhref="~/Content/JqueryEasyUI/themes/default/easyui.css"rel="stylesheet" />

<linkhref="~/Content/JqueryEasyUI/themes/icon.css"rel="stylesheet" />

@*加入Jquery，EasyUI和easyUI的语言包的JS文件*@

<scriptsrc="~/Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>

<scriptsrc="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>

<scriptsrc="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>

以下是实现对EasyUI的DataGird控件操作的JS代码

@*实现对EasyUI的DataGird控件操作的JS代码*@

    <scripttype="text/javascript">

        //窗口控件载入完运行

        $(function () {

           $("#btnSearch").click(function () {

                var pars = { name:$("#txtName").val() };

                //有參数时运行此方法

                initTable(pars)

            });

            //无參数时运行此方法

            initTable("");

        });

//实现DataGird控件的绑定操作

        function initTable(pars) {

            $('#tableShowData').datagrid({   //定位到Table标签，Table标签的ID是tableShowData

                fitColumns: true,

                url:'/ExcellentDispatch/QueryInfo',  //指向后台的Action来获取当前用户的信息的Json格式的数据

                title: '卓越派遣信息查询',  //表格标题

                iconCls: 'icon-save',

                height: 500,

                nowrap: true,

                loadMsg: '正在载入用户的信息...',

                autoRowHeight: false,

                striped: true,

                collapsible: true,

                pagination: true,

                rownumbers: true,//加入列数字

                //sortName: 'ID',    //依据某个字段给easyUI排序

                //sortOrder: 'asc',

                remoteSort: false,

                idField: 'ID',//主键

                queryParams: pars,  //异步查询的參数

                pageList: [5, 10, 15, 20, 25,30],//分页的分组设置

                pageSize: 10,//每页的默认值大小

                columns: [[

                    { title: '全选',checkbox:true},

                { field: 'companyName', title:'单位名称' },

                { field: 'ID', title: '档案编号' },

                    { field: 'name', title:'姓名' },

                    { field: 'sex', title: '性别'},

                    { field: 'idNumber', title:'身份证号' },

                    { field: 'receivemode',title: '接收方式' },

                    { field: 'myidentity',title: '本人身份' },

                    { field:'educationBackground', title: '学历' },

                    { field: 'oldworkplace',title: '原工作单位' },

                    { field: 'isrecord', title:'档案在否' }

                ]],

                //表头的button

                toolbar: [{

                    id: 'btnCancle',

                    text: '删除',

                    iconCls: 'icon-cancel',

                    handler: function () {

                        //实现直接删除全部数据的方法

                        Delete();

                    }

                }, '-', {

                    id: 'btnDetail',

                    text: '具体',

                    iconCls: 'icon-remove',

                    handler: function () {

                        //展示所选人员的具体信息方法

                        Show();

                    }

                }, '-', {

                    id: 'btnEdit',

                    text: '编辑',

                    iconCls: 'icon-edit',

                    handler: function () {

                        //编辑所选人员的信息方法

                        Update();

                    }

                }, '-', {

                    id: 'btnCheckout',

                    text: '导出',

                    iconCls: 'icon-undo',

                    handler: function () {

                        //实现改动的方法

                        Checkout();

                    }

                }]

            });

        }

以下是我们easyui绑定的表格

<body>

    <div>

        请输入姓名：<input type="text"id="txtName" />

        <input type="button"id="btnSearch" value="查询" />

        <table id="tableShowData"class="querytable"></table>

    </div>

</body>

Controller
代码

public ActionResultQueryInfo()

        {

            try

            {

                int pageIndex;

                int pageSize;

                //查询參数

                string name =Request["name"];

                if (name == null)

                {

                    name = "";

                }

                //当前页码值

                if(!int.TryParse(Request["page"], out pageIndex))

                {

                    pageIndex = 1;

                }

                //每页值大小

                if(!int.TryParse(Request["rows"], out pageSize))

                {

                    pageSize = 5;

                }

                //总页数

                int totalCount;

                //分页查询查到的结果集

                var AllList =myExcellentDispatch.QueryInfo(pageSize, pageIndex, out totalCount,name).ToList();

                //rows必须给赋值，这是easyui前台显示须要的

                var rows = from c in AllList

                           select new

                           {

                               ID = c.ID,

                               companyName =c.companyName,

                               name = c.name,

                               sex = c.sex,

                               idNumber =c.idNumber,

                               myidentity =c.myidentity,

                               receivemode =c.receivemode,

                              educationBackground = c.educationBackground,

                               oldworkplace =c.oldworkplace,

                               isrecord =c.isrecord,

                           };

               //返回Json格式的字符串（必须有rows和total，名字要和easyui声明的变量一致）

                return Json(new { rows = rows,total = totalCount }, JsonRequestBehavior.AllowGet);

            }

            catch (Exception)

            {

                throw;

            }

        }