KendoUI 简单增，删，改，查操作

界面:

表

班级表

学生表

年级表

框架

框架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" />&nbsp;<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.Gradeon C1.Grade_ID equals G1.Grade_IDjoin S1 in db.Studentson C1.Class_ID equals S1.Class_IDwhere 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)中的 demoCondiionsgrid.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>&nbsp;保存</button>&nbsp;&nbsp;<button type="reset" id="sreset" class="k-button k-button-icontext k-grid-add" style="display:none"><span class="glyphicon glyphicon-refresh"></span>&nbsp;重置</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>&nbsp;取消</button></td></tr></table></form>
</div>

增删改代码

<script>$("#operate").on('click', 'button', function (e) {//根据ID找到这个div 再获取这个div里面的点击事件var btnid = this.id;     //获取当前点击按钮的idswitch (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; //获取要删除的StudentIDvar 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>

KendoUI 简单增，删，改，查操作相关推荐

Unity使用Mysql(添/删/改/查)（保姆级）
Unity使用Mysql添/删/改/查/保姆级 UnityDemo版本数据库下载地址教程可视化窗口下载教程使用可视化窗口 dll下载地址本次Demo下载地址本项目脚本 SqlHelper M ...
表单的增删改查
django单表操作增删改查一.实现:增.删.改.查 1.获取所有数据显示在页面上 model.Classes.object.all(),拿到数据后,渲染给前端;前端通过for循环的方式,取 ...
mysql數據庫的增刪改查_MySQL數據庫之基礎增刪改查操作
作者: 守望幸福最后修改日期:2014-7-27 所操作的MySQL數據庫名:firstdb 所用的兩個表結構如下: student表 number name socre born_d ...
properties（map）增.删.改.查.遍历
import java.util.Map; import java.util.Properties; import java.util.Set;/*** properties(map)增.删.改.查. ...
springboot显示信息并且修改_Spring Boot小结-03--增.删.改.查
将数据库商品数据进行-增.删.改.查一.创建项目并添加依赖 *创建项目并设置基本信息 *指定项目核心依赖 *项目结构 *项目配置文件二.业务实现 *Pojo类定义 *Dao接口方法及映射定义pac ...
python学生姓名添加删除_python-函数-实现学生管理系统,完成对学员的增,删,改,查和退出学生管理系统。...
实现学生管理系统,完成对学员的增,删,改,查和退出学生管理系统. 要求1:使用一个list用于保存学生的姓名. 要求2:输入0显示所有学员信息,1代表增加,2代表删除,3代表修改,4代表查询,exit ...
IDEA中使用Java语言连接MySQL，实现增、删、查操作
IDEA中使用Java语言连接MySQL,实现增.删.查操作连接条件想要连接MySQL数据库首先需要一个mysql-connector-java-8.0.25.jar包 [官网下载](MySQL ...
简单的php数据库操作类代码(增,删,改,查)
数据库操纵基本流程为: 1.连接数据库服务器 2.选择数据库 3.执行SQL语句 4.处理结果集 5.打印操作信息其中用到的相关函数有 •resource mysql_connect ( [stri ...
Python 操作 Elasticsearch 实现增删改查
Github 地址:https://github.com/elastic/elasticsearch-py/blob/master/docs/index.rst 官网地址:https://elasti ...

KendoUI 简单增，删，改，查操作

KendoUI 简单增，删，改，查操作相关推荐

最新文章

热门文章