MVC +EasyUI 实现简单查询功能

来源：互联网发布：js cst时间转换编辑：程序博客网时间：2024/05/16 14:22

用EasyUI+MVC实现一个简单的查询功能，根据下拉菜单的选项来实现对数据库查询的操作。实现界面如下图所示：

一、先画出查询界面的查询按钮

<div id="query">            模板名称：            <select id="Select1" onchange="selectTemp()">                <option>理论课</option>                <option>实践课</option>            </select>                       </div>

二、编写查询函数

        //初始化表格        function initTable() {            //把搜素框里的内容提交到后台对数据进行过滤。            $('#tt').datagrid({                width: 700,                height: 400,                fitColumns: true,                idField: 'ID',                loadMsg: '正在加载用户的信息...',                pagination: true,                singleSelect: false,                pageSize: 10,                pageNumber: 1,                pageList: [10, 20, 30],                queryParams: {

       //定义一个变量，将其传到控制器中                    searchName: $("#searchName").val(),                    searchRemark: $("#searchRemark").val()                },

      //定义查询出来的数据的样式                columns: [[{ field: 'ck', checkbox: true, align: 'left', width: 50 },{ field: 'ID', title: '编号', width: 80 },{ field: 'CheckScore', title: '分值', width: 120 },                        { field: 'CheckContent', title: '内容', width: 120 },                        {                            field: 'editWeight', title: '操作', align: 'left', width: 80,                            formatter: function (value, rec) {                                return '<a href="/EvaluationAssessTemplate/WeightTemplate" style="color:red;" onclick="editWeight()">编辑权重</a>';                            }                        }                ]],                toolbar: [{                    id: 'btnDownShelf',                    text: '添加',                    iconCls: 'icon-add',                    handler: function () {                        showAddFrm();                    }                }, {                    id: 'btnDelete',                    text: '删除',                    iconCls: 'icon-remove',                    handler: function () {                        dodel();                    }                }, {                    id: 'btnEdit',                    text: '修改',                    iconCls: 'icon-edit',                    handler: function () {                        showUpdateFrm();                    }                }],                onHeaderContextMenu: function (e, field) {                },                onLoadSuccess: function (data) {                    $(".delUser").unbind("click");                    $(".delUser").bind("click", function () {                        alert($(this).attr("uid"));                        return false;                    });                    $(".editUser").unbind("click");                    $(".editUser").bind("click", function () {                        //alert($(this).attr("uid"));                        doEdit($(this).attr("uid"));                        return false;                    });                }            });        }

  function selectTemp() {            var TempName = $("#Select1").val();

      //这个是控制器中查询方法的地址            var url = "/EvaluationAssessTemplate/getTemp";            getStrTable(url);

三、将搜索框中获取的值传入控制器中，到后台进行处理

   public string getTemp()        {            var tempName = Request["templateName"].ToString();            string strTemplateId = null;            if (tempName == "理论课")                strTemplateId = "1";            else if (tempName == "实践课")                strTemplateId = "2";            List<EvaluationCheck> list = new List<EvaluationCheck>();

       //调用后台的方法            list = iTemplateWCF.QueryCheckByTemplateId(strTemplateId);            JavaScriptSerializer serializer = new JavaScriptSerializer();

      //将获取的数据转化为Json串            string strJson = serializer.Serialize(list);            return strJson;        }

最后实现的效果如上图所示，简单的查询操作就实现啦。

0 0