界面:
表
班级表
学生表
年级表
框架
框架HTML代码
<div id="splittle">
<div id="left">
<div id="Student_Tree"></div>
</div>
<div id="right">
<div id="gridview"></div>
</div>
</div><div id="Student_Tree"></div> 这是 左边的树形控件的HTML代码
<div id="Gridview"></div> 这是右边表格控件的HTML代码
框架JavaScript代码
<script>
var demoConditions = "";
var Class_ID = 1;
$("#splittle").kendoSplitter({
panes: [
{ collapsible: true, size: '20%' },
{ collapslible: true }
]
})
</script>一。显示数据库中学生的信息
使用 KendoUI 中的 Grid组件进行渲染
首先要通过后台获取数据库中的数据
var datasource = new kendo.data.DataSource({
pageSize: 2, //一页显示几条数据
batch: true,
pageable: true,
serverSrting: true,
serverPaging: true,
sort: [{ field: "StudentNum", dir: "desc" }], //排序 field 排序字段 dir 升序降序
schema: { //Object远程数据解析配置
data: "rows", //这是接受所有的数据
total: "total", //总数据的行数
model: {
id: "StudentID",
fields: {
StudentNum: { type: 'int' }
}
}
},
transport: {
read: {
url: "/Home/Select", //后台地址
type: "post",
datatype: "json"
},
parameterMap: function (options, operation) { //传给后台的参数
if (operation == "read") {
return {
conditions:demoConditions, //查询条件
page: options.page, //第几页
pageSize: options.pageSize, //一页显示几条数据
Class_ID: Class_ID //当前选择的班级编号
}
}
}
},
})然后再创建Grid
var grid = $("#gridview").kendoGrid({
height:"300px", //高度
dataSource: datasource, //创建的数据源
toolbar: [
{ template: kendo.template($("#gridbar").html()) } //头部按钮 template: 绑定模板
],
selectable: "single", //单选
headerCenter: true,
rowNumber: true,
srollable: true,
pageable: {
pageSizes: [1, 2, 3, 5], //一页显示几条数据 的选择项
refresh: true,
buttonCount: 5
},
sortable: true,
resizable: true,
serverPaging: true,
columns: [ //绑定数据源中的数据的字段名 field: 字段名 title:表头名称
{ field: "StudentName", title: "姓名" },
{ field: "StudentNum", title: "学号" },
{ field: "StudentSex", title: "性别" }
],
columnMenu: true,
}).data("kendoGrid");Grid 中 toolbar 模板的代码
<script id="gridbar" type="text/x-kendo-template">
<div id="gridmenu" style="float:left;margin-right:3px;margin-top:2px;">
<form id="searchform">
姓名：<input type="text" id="s_demo_title" name="StudentName" class="k-textbox" />
<button type="button" id="btnSearch" class="k-button"><span class="glyphicon glyphicon-search"></span>查询</button>
</form>
</div>
<div id="operate" style="float:right;margin-right:3px;margin-top:2px;">
<button id="btnAdd" class="k-button k-button-icontext k-grid-add">新增</button>
<button id="btnEdit" class="k-button k-button-icontext k-grid-add">修改</button>
<button id="btnDelete" class="k-button k-button-icontext k-grid-add">删除</button>
</div>
</script>后代代码
public ActionResult Select(int page, int pageSize,string conditions="杨",int Class_ID=1,int Grade_ID=1)//初始值
{
using (_9_30_kendoUI_初试.Models.StudentDBEntities db = new Models.StudentDBEntities()) {
var s = from C1 in db.Class //LinQ查询 三张表
join G1 in db.Grade
on C1.Grade_ID equals G1.Grade_ID
join S1 in db.Students
on C1.Class_ID equals S1.Class_ID
where S1.Students_Name.Contains(conditions) //模糊查询
&& C1.Class_ID==Class_ID
select new
{
StudentID=S1.Students_ID,
StudentName = S1.Students_Name,
StudentSex = S1.Students_Sex,
StudentNum = S1.Students_Num
};
var result = s.ToList().Skip(pageSize * (page - 1)).Take(pageSize); //分页
var obj = new { total = s.ToList().Count, rows = result };
return Json(obj,JsonRequestBehavior.AllowGet);
}
}二。查询
根据输入的姓名模糊查询
$("#btnSearch").click(function () {
var btnSearch = $("#s_demo_title").val();//获取文本框中的文本
demoConditions = btnSearch; //将文本传给 数据源(dataScorce)中的 demoCondiions
grid.dataSource.page(1); //更新 Grid
});
</script>三。增删改
删除后台代码
public ActionResult StudentDel(_9_30_kendoUI_初试.Models.Students s)
{
using (_9_30_kendoUI_初试.Models.StudentDBEntities db=new Models.StudentDBEntities()) {
db.Students.Remove(db.Students.Find(s.Students_ID));//获取传过来的对象的ID再根据ID进行删除操作
int result= db.SaveChanges();
return Content(result==1?"删除成功":"删除失败");
}
}修改后代代码
public ActionResult StudentEdit(_9_30_kendoUI_初试.Models.Students s)
{
using (_9_30_kendoUI_初试.Models.StudentDBEntities db = new Models.StudentDBEntities())
{
_9_30_kendoUI_初试.Models.Students ss= db.Students.Find(s.Students_ID);
ss.Students_Name = s.Students_Name;
ss.Students_Num = ss.Students_Num;
ss.Students_Sex = ss.Students_Sex;
int result= db.SaveChanges();
return Content(result==1?"修改成功":"修改异常");
}
}增加后台代码
public ActionResult StudentAdd(_9_30_kendoUI_初试.Models.Students s) {
using (_9_30_kendoUI_初试.Models.StudentDBEntities db = new Models.StudentDBEntities()) {
db.Students.Add(s);
int result= db.SaveChanges();
return Content(result==1?"添加成功":"添加失败");
}
}前台代码
<script>
var editdiv = $("#editdiv").kendoWindow({ //这是新增，修改的弹窗
width: "400px",
heigth: "300px",
open: function () {
this.center();
this.wrapper.css({ top: "5px" });
var validator = $("#editform").data("kendovalidator");
if (validator) {
validator.hideMessages();
}
},
title: "新增",
modal: true,
visible: false,
}).data("kendoWindow");
</script><div id="editdiv" style="display:block"> @*这是弹窗的HTML代码*@
<form id="editform">
<table class="table">
<tr>
<td width="100px" class="tdColor" style="white-space: nowrap">姓名：<span style="color:red">*</span></td>
<td>
<input id="StudentName" name="Students_Name" class="k-textbox" type="text" style="width:100%;" maxlength="50" required="required" />
<input name="Students_ID" style="display:none" />
<input id="Class_ID" name="Class_ID" style="display:block" value="1" />
</td>
</tr>
<tr>
<td width="100px" class="tdColor" style="white-space: nowrap">性别：<span style="color:red">*</span></td>
<td>
<input id="man" name="Students_Sex" class="k-radiobutton" type="radio" value="男" checked="checked" required="required" />男
<input id="wuman" name="Students_Sex" class="k-radiobutton" type="radio" value="女" required="required" />女
</td>
</tr>
<tr>
<td width="100px" class="tdColor" style="white-space: nowrap">学号：<span style="color:red">*</span></td>
<td>
<input id="StudentNum" name="Students_Num" class="k-textbox" type="text" style="width:100%;" maxlength="50" required="required" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<button type="button" id="btnPro" class="k-button k-button-icontext k-grid-add"><span class="glyphicon glyphicon-ok"></span> 保存</button>
<button type="reset" id="sreset" class="k-button k-button-icontext k-grid-add" style="display:none"><span class="glyphicon glyphicon-refresh"></span> 重置</button>
<button type="button" id="btncancel" class="k-button k-button-icontext k-grid-add" onclick="javascript: editdiv.close()"><span class="glyphicon glyphicon-ban-circle"></span> 取消</button>
</td>
</tr>
</table>
</form>
</div>增删改代码
<script>
$("#operate").on('click', 'button', function (e) {//根据ID找到这个div 再获取这个div里面的点击事件
var btnid = this.id; //获取当前点击按钮的id
switch (btnid) { //等值判断点击的是哪个按钮 再执行不同的操作
case "btnAdd":
openeditdiv(0);
break;
case "btnEdit":
openeditdiv(1);
break;
case "btnDelete":
delete_click();
break;
default:
break;
}
})
var editype = 0;//默认为新增
function openeditdiv(s) {
if (s == 0) {
editdiv.title = "新增";
editype = "add";
$("#editform").trigger('reset'); //清空表单的值
}
else {
editdiv, title = "修改";
editype = "update";
var sele = grid.select(); //获取选中的一行
if (sele.length == 1) {
//把数据填充到form 表单
var dataItem = grid.dataItem(sele[0]);
var $form = $("#editform");
// var a=$form.autofill(dataItem);
// alert(a)
$("#StudentName").val(dataItem["StudentName"]);//填充姓名
if (dataItem["StudentSex"] == "男") { //填充性别
$("#man").attr("cheched", "checked");
}
else {
$("#wuman").attr("checked", "checked");
}
$("#StudentNum").val(dataItem["StudentNum"]); //填充学号
$("input[name='Students_ID']").val(dataItem["StudentID"]);//填充StudentID
}
else {
alert("请选择一条要删除的数据");
return;
}
}
editdiv.open();
}
//-------------------保存按钮点击事件 添加和修改
$("#btnPro").click(function (e) {
e.preventDefault();
var $form = $("#editform");
var data = $form.serializeObject(); //序列化表单的值
if (editype == "add") { //添加
$.ajax({
type: "get",
url: "/Home/StudentAdd", //添加的后台地址
contentType: "application/json",
data: data, //传到后台的数据（表单填写的数据）
beforeSend: function () { //准备事件
kendo.ui.progress($form, true); //显示请等待图片
$("#btnPro").attr('disabled', 'disabled'); //禁止保存按钮
$("#btnPro").text("保存中...");//修改该保存按钮的文本
},
success: function (resp) { //返回事件
if (resp == "添加成功") {
kendo.ui.progress($form, false);//关闭请等待图片
alert("添加成功")
// grid.datasource.read();//刷新网格
$("#btnPro").attr('disabled', 'false');
$("#btnPro").text("保存");
editdiv.close(); //关闭弹窗
grid.dataSource.page(1);//刷新Grid
}
else {
alert(resp);
$("#btnPro").attr("disabled", "false");
$("#btnPro").text("保存");
}
},
complete: function () {//ajax 完成事件
}
})
} else {//修改 ---与添加差不多
$.ajax({
type: 'GET',
url: "/Home/StudentEdit",
contentType: "application/json",
data: data,
beforeSend: function () {
kendo.ui.progress($form, true);
$("#btnPro").attr("disabled", "true");
$("#btnPro").text("保存中...");
},
success: function (resp) {
if (resp == "修改成功") {
alert(resp)
editdiv.close();
$("#btnPro").attr("disabled", "false");
$("#btnPro").text("保存");
grid.dataSource.page(1);
}
else {//修改异常
alert(resp)
$("#btnPro").attr("disabled", "false");
$("#btnPro").text("保存");
}
},
complete: function () {//完成事件
}
})
}
})
function delete_click() { //删除事件
var $form = $("#editform");
var sele = grid.select(); // 获取要删除行
if (sele.length == 0) {
alert("请选择要删除的人")
return;
}
var id = grid.dataItem(sele[0]).StudentID; //获取要删除的StudentID
var student = { Students_ID: id }
if (sele.length == 1) { //用ajax 传到后台 进行删除
$.ajax({
url: "/Home/StudentDel",
type: "get",
data: student,
success: function (result) {
alert(result)
grid.dataSource.page(1); //更新Grid
}
})
}
}
</script>