MVC +EasyUI 实现简单查询功能
用EasyUI+MVC实现一个简单的查询功能，根据下拉菜单的选项来实现对数据库查询的操作。实现界面如下图所示：
一、先画出查询界面的查询按钮
模板名称：
二、编写查询函数
//初始化表格
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 '编辑权重';
}
}
]],
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 list = new List(); //调用后台的方法
list = iTemplateWCF.QueryCheckByTemplateId(strTemplateId);
JavaScriptSerializer serializer = new JavaScriptSerializer(); //将获取的数据转化为Json串
string strJson = serializer.Serialize(list);
return strJson;
}最后实现的效果如上图所示，简单的查询操作就实现啦。