MVC +EasyUI 实现简单查询功能

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

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

<div id="query">
            模板名称：
            <select id="Select1" οnchange="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;" οnclick="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;
        }

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