KendoUI Grid 增删改查功能 前台+后台
效果图
后台分页核心代码
数据返回格式
str.append("{\"error\":");//总页数
str.append("\"\"");
str.append(",\"total\":"+totalRecords);//总记录
str.append(",\"data\":");
分页请求的参数
String page = StringUtil.null2blank(request.getParameter("page"));
String rows = StringUtil.null2blank(request.getParameter("pageSize"));
String sort = StringUtil.null2blank(request.getParameter("field"));
String order = StringUtil.null2blank(request.getParameter("dir"));
list代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@include file="/static/common/ace14commonJsForKendo.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="<%=basePath%>/plugins/kendoexam/img/favicon.png" rel="icon" type="image/png">
<link href="<%=basePath%>/plugins/kendoexam/css/fontawesome-all.min.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/flag-icon.min.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/weather-icons.min.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/kendo.ui.widgets.icon.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/kendo-edit.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/bootstrap.min.css" rel="stylesheet">
<%--<link href="<%=basePath%>static/ace14/assets/css/bootstrap.css" rel="stylesheet" />--%>
<%--<link id="Amikoko" href="<%=basePath%>/plugins/kendoexam/css/themes/theme_default.min.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/amikoko.admin.css" rel="stylesheet">--%>
<script src="<%=basePath%>/plugins/kendoexam/js/jquery.min.js"></script>
<script src="<%=basePath%>/plugins/kendoexam/js/kendo.all.min.js"></script>
<script id="IKKI" src="<%=basePath%>/plugins/kendoexam/js/global/kendo.zh-CHS.js"></script>
<script src="<%=basePath%>/plugins/kendoexam/js/ikki.js"></script>
</head>
<style type="text/css">
.tdgray{
background-color: #F7F7F7;
text-align:right;
padding-top: 15px;
width: 100px;
line-height: 30px;
height: 30px;
}
.tdvalue{
background-color: #ffffff;
padding-top: 19px;
width: 120px;
}
.k-grid td ,.k-grid th {
border-bottom: 1px solid #dee2e6;
}
.table td, .table th {
padding: .75rem;
vertical-align: middle;
border-top: 1px solid #dee2e6;
}
.k-switch-handle {
border-radius: 6em;
width:40px;
height: 25px;
}
form {
margin-block-end: 0em;
}
.k-dialog-titlebar {
border-color: inherit;
color: #000000;
background-color: #f6f6f6;
}
</style>
<body>
<div id="window">
<div id="gridview"></div>
</div>
<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="GCMC" class="k-textbox" />
<button type="button" id="btnSearch" class="k-button"><span class="k-icon k-i-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-notification-warning ml-1 k-grid-add"><span class="k-icon k-i-plus"></span> 新增</button>
<button id="btnEdit" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-i-edit"></span> 修改</button>
<button id="btnDelete" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-i-close"></span> 删除</button>
<%-- <button id="btnDiag" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-i-search"></span> 删除</button>--%>
</div>
</script>
<div id="editdiv" style="display:block">
<%-- <form id="editform">--%>
<%-- <table class="table">--%>
<%-- <tr>--%>
<%-- <td width="100px" class="tdColor" style="white-space: nowrap">PKID：<span style="color:red">*</span></td>--%>
<%-- <td>--%>
<%-- <input id="pkid" name="pkid" class="k-textbox" type="text" style="width:100%;" maxlength="50" />--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td width="100px" class="tdColor" style="white-space: nowrap">GCMC：<span style="color:red">*</span></td>--%>
<%-- <td>--%>
<%-- <input id="gcmc" name="gcmc" class="k-textbox" type="text" style="width:100%;" maxlength="50" required="required" />--%>
<%-- <div class="card-body">--%>
<%-- <input id="widthSwitch" type="checkbox">--%>
<%-- </div>--%>
<%-- </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" οnclick="javascript: editdiv.close()"><span class="glyphicon glyphicon-ban-circle"></span> 取消</button>--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- </table>--%>
<%-- <table class="table table-bordered">--%>
<%-- <tr>--%>
<%-- <td class="tdgray">身份证号:</td>--%>
<%-- <td colspan="7">--%>
<%-- <input id="pkid" name="pkid" class="k-textbox" type="text" style="width:100%;" maxlength="50" />--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray" >姓名:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- <input id="textSwitch" type="checkbox" checked alt="111" data-change="lock">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >民族:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- <input class="w-100" id="widthNumericTextBox" type="number">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >籍贯:</td>--%>
<%-- <td class="tdvalue" >--%>
<%-- <input type="checkbox" id="eq1" class="k-checkbox" checked="checked">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >是否有效:</td>--%>
<%-- <td class="tdvalue" >--%>
<%-- <input type="radio" name="engine" id="engine1" class="k-radio" checked="checked">--%>
<%-- <input type="radio" name="engine" id="engine" class="k-radio">--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray" >人员身份:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray">联系方式一:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >参加工作时间:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray">是否享受荣誉津贴:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray" >政治面貌:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >婚姻状况:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >户口类型:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >所属银行:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray">允许注册:</td>--%>
<%-- <td colspan="7">--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray">个人简介:</td>--%>
<%-- <td colspan="7">--%>
<%-- <textarea rows="10" cols="30" style="width: 100%" id="grjj" name="grjj" ></textarea>--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- </table>--%>
<%-- </form>--%>
</div>
<div class="k-loading-image" id="loading" style="display: none;"></div>
<script>
//Form弹窗
var editdiv="";
//grid
var grid="";
$(function(){
var datasource = new kendo.data.DataSource({
pageSize: 100, //一页显示几条数据
batch: true,////可批量操作
pageable: true,
serverSorting : true,//支持排序功能
serverPaging: true,//支持分页功能
schema: { //Object远程数据解析配置
data: "data", //这是接受所有的数据
total: "total", //总数据的行数
model: {
id: "PKID",
fields: {
PKID: { type: 'string' },
GCMC: { type: 'string' }
}
}
},
//多字段排，参数获取：sort[0][field]=PKID&sort[0][dir]=desc
//sort: [{ field: "PKID", dir: "desc" }], //排序 field 排序字段 dir 升序降序
//单字段排序，用下面那个方式
transport: {
read: "<%=basePath%>/xmJbxx/ajaxxmJbxxList",
parameterMap: function (data, type) {
//单字段排序
if (data.sort) {
var sortObj = data.sort[0];
data.dir = sortObj.dir;
data.field = sortObj.field;
} else {
data.field = "id";
data.dir = "desc";
}
data.name = $("#s_demo_title").val();
return data;
}
},
})
grid = $("#gridview").kendoGrid({
//height:"800", //高度
dataSource: datasource, //创建的数据源
toolbar: [
{ template: kendo.template($("#gridbar").html()) } //头部按钮 template: 绑定模板
],
//selectable: "single", //单选
selectable: "multiple, row",
serverFiltering: true,//支持查询功能
serverGrouping: true,
reorderable: true,
serverSorting: true,
filterable: true,
headerCenter: true,
rowNumber: true,
srollable: true,
columnMenu: true,
serverPaging: true,
sortable: true,
sortable: {
mode: "multiple"
},
resizable: true,
pageable: true,
pageable: {
pageSizes: [100, 200, 300, 500], //一页显示几条数据 的选择项
refresh: true,
input : true,
numeric : false,
pageSizes: true,
buttonCount: 5
},
columns: [ //绑定数据源中的数据的字段名 field: 字段名 title:表头名称
/* { field: "GCMC", title: "姓名" },
{ field: "StudentNum", title: "学号" },
{ field: "StudentSex", title: "性别" }
{ selectable: true, width: '15px' },
*/
{locked: true,width:"50px",
field: "rowNumber",
title: "O",
template: "<span class='row-number'></span>",
headerAttributes: {
"class": "table-header-cell",
style: "text-align: center"
},
attributes: {
"class": "table-cell",
style: "text-align: center"
}
},
{locked: true, selectable: true, width: '50px' ,
headerAttributes: {
"class": "table-header-cell",
style: "text-align: center"
},
attributes: {
"class": "table-cell",
style: "text-align: center"
}
},
{locked: true, field: "PKID", title: "PKID", width:"200px",
headerAttributes: {
"class": "table-header-cell",
style: "text-align: center; font-size: 14px"
},
attributes: {
"class": "table-cell",
style: "text-align: center; font-size: 14px"
}
},
{ field: "GCMC", title: "工程名称", width: "300px",
//列标题居中
headerAttributes: {
"class": "table-header-cell",
style: "text-align:left;"
},
//列数据居左
attributes: {style: "text-align:left;border:1px"},
//列数据过长时，不换行，简略为 " ... "
attributes: {style: "white-space:nowrap;text-overflow:ellipsis;"}
},
{ field: "PKID", title: "PKID", width: "200px" },
{ field: "GCMC", title: "GCMC", width: "300px" },
{ field: "PKID", title: "PKID", width: "200px" },
{ field: "GCMC", title: "GCMC", width: "300px" },
{ field: "PKID", title: "PKID", width: "200px" },
{ field: "GCMC", title: "GCMC", width: "300px" }
],dataBound: function () {
var rows = this.items();
var page = this.pager.page() - 1;
var pagesize = this.pager.pageSize();
$(rows).each(function () {
var index = $(this).index() + 1 + page * pagesize;
var rowLabel = $(this).find(".row-number");
$(rowLabel).html(index);
});
}
//,editable: "incell"
}).data("kendoGrid");
$("#btnSearch").click(function () {
// var btnSearch = $("#s_demo_title").val();//获取文本框中的文本
// demoConditions = btnSearch; //将文本传给 数据源(dataScorce)中的 demoCondiions
grid.dataSource.page(1); //更新 Grid
});
editdiv = $("#editdiv").kendoWindow({
width: "1234px",
height: "600px",//差异就在下边这个，content，去掉就行了
content: {
url: "<%=basePath%>xmJbxx/goxmJbxxEdit?pkid=", // 内容url
// data: { pkid : "123" },
// type: "post",
iframe: true, // 是否 iframe
},
actions: [ // 按钮栏
"Custom", // 自定义
"Pin", // 固定
"Refresh", // 刷新
"Minimize", // 最小化
"Maximize", // 最大化
"Close" // 关闭
],
open: function () {
this.center();
this.wrapper.css({ top: "5px" });
//
// var validator = $("#editform").data("kendovalidator");
// if (validator) {
// validator.hideMessages();
// }
},
title: "新增",
modal: true,
visible: false,
modal: true, // 是否模态
daggable: true, // 是否支持拖动
pinned: false, // 是否支持固定
resizable: true, // 是否支持调整大小
}).data("kendoWindow");
editFramediv = $("#editFramediv").kendoWindow({
width: "1234px",
height: "600px",
content: {
url: "<%=basePath%>xmJbxx/goxmJbxxList", // 内容url
type: "post",
data: { data : "123" },
iframe: true, // 是否 iframe
},
actions: [ // 按钮栏
"Custom", // 自定义
"Pin", // 固定
"Refresh", // 刷新
"Minimize", // 最小化
"Maximize", // 最大化
"Close" // 关闭
],
open: function () {
this.center();
this.wrapper.css({ top: "5px" });
},
title: "新增",
modal: true,
visible: false,
modal: true, // 是否模态
daggable: true, // 是否支持拖动
pinned: false, // 是否支持固定
resizable: true, // 是否支持调整大小
/* open: Open, // 打开事件
close: Close, // 关闭事件
refresh: Refresh, // 刷新事件
activate: Activate,
deactivate: deactivate,
resize: Resize,
dragstart: DragStart,
dragend: DragEnd,*/
}).data("kendoWindow");
});
</script>
<script>
$(function(){
$("#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(); //获取选中的一行
/*//选中多行的写法
var selectedIds = [];
$(rows).each(function(){
selectedIds.push($(this).attr("data-uid"))
});
console.log("Selected row Ids: " + selectedIds.join(", "));*/
//editdiv.content.url= "<%=basePath%>xmJbxx/goxmJbxxEdit?pkid="; // 内容url
if (sele.length == 0) {
kendo.alert("请选择一条要修改的数据");
return;
}
//把数据填充到form 表单
var dataItem = grid.dataItem(sele[0]);
editdiv.refresh({
url: "<%=basePath%>xmJbxx/goxmJbxxEdit?pkid="+dataItem["PKID"]
});
// $("#pkid").val(dataItem["PKID"]);
// $("#gcmc").val(dataItem["GCMC"]);
// var $form = $("#editform");
// //var a=$form.autofill(dataItem);
// // kendo.alert(a)
// $("#GCMC").val(dataItem["GCMC"]);//填充姓名
// if (dataItem["StudentSex"] == "男") { //填充性别
// $("#man").attr("cheched", "checked");
// }
// else {
// $("#wuman").attr("checked", "checked");
// }
// $("#StudentNum").val(dataItem["StudentNum"]); //填充学号
// $("input[name='Students_ID']").val(dataItem["StudentID"]);//填充StudentID
}
editdiv.open();
}
//保存按钮点击事件 添加和修改
$("#btnPro").click(function (e) {
e.preventDefault();
var $form = $("#editform");
var data = $form.serializeObject(); //序列化表单的值
$.ajax({
type: "post",
url:"<%=basePath%>xmJbxx/ajaxSavexmJbxx", //添加的后台地址
//contentType: "application/json",
data: data, //传到后台的数据（表单填写的数据）
beforeSend: function () { //准备事件
kendo.ui.progress($form, true); //显示请等待图片
$("#btnPro").attr('disabled', 'disabled'); //禁止保存按钮
$("#btnPro").text("保存中...");//修改该保存按钮的文本
},
success: function (resp) { //返回事件
kendo.ui.progress($form, false); //显示请等待图片
$("#btnPro").removeAttr('disabled');
$("#btnPro").text("保存");
if (resp == "添加成功") {
editdiv.close(); //关闭弹窗
grid.dataSource.page(1);//刷新Grid
Swal.fire({
position: 'top-end',
type: 'success',
title: '保存成功',
showConfirmButton: false,
timer: 1500
})
}
else {
//kendo.alert(resp);
swal(resp);
}
},
complete: function () {//ajax 完成事件
}
})
})
function delete_click() { //删除事件
// var $form = $("#editform");
// var sele = grid.select(); // 获取要删除行
// if (sele.length == 0) {
// kendo.alert("请选择要删除的行的数据")
// return;
// }
// debugger;
// var id = grid.dataItem(sele[0]).StudentID; //获取要删除的StudentID
var ids = grid.selectedKeyNames();
if (ids.length == 0) {
kendo.alert("请选择要删除的行的数据");
return;
}
$('#loading').show();
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: '确定删除吗?',
text: "删除后无法找回,请慎重!",
type: 'warning',
showCancelButton: true,
confirmButtonText: '确定删除!',
cancelButtonText: '取消删除',
reverseButtons: true
}).then((result) => {
if (result.value) {
swalWithBootstrapButtons.fire(
'删除!',
'删除成功',
'success'
)
} else if (
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'已经取消',
'Your imaginary file is safe :)',
'error'
)
}
})
$.post("<%=basePath%>xmJbxx/delxmJbxx",{'ids': ids.toString()},function(data){
$('#loading').hide();
if(data.state=="true"){
Swal.fire({
position: 'top-end',
type: 'success',
title: '删除成功',
showConfirmButton: false,
timer: 1500
}),
//kendo.alert('删除成功！', 'warning');
//刷新表格
grid.dataSource.page(1); //更新 Grid
}else{
kendo.alert('删除失败！', 'warning');
}
});
}
});
</script>
<script>
// 文字转换框
$('#textSwitch').kendoSwitch({
checked: true,
width:50,
messages: {
checked: "是",
unchecked: "否",
}
});
// 无箭头数字框
$('#widthNumericTextBox').kendoNumericTextBox({
spinners: false,
decimals: 2,
restrictDecimals: true,
value: 3.14
});
</script>
<style>
html,body,#window,#gridview{
border-width: 0;
height: 100%;
padding: 0px;
margin: 0px;
font: 13px "Microsoft YaHei";
font-family: PingFangSC-Regular,Microsoft YaHei,SimSun,Arial,Helvetica,Verdana,sans-serif !important;
}
</style>
</body>
</html>
编辑页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@include file="/static/common/ace14commonJsForKendo.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="<%=basePath%>/plugins/kendoexam/img/favicon.png" rel="icon" type="image/png">
<link href="<%=basePath%>/plugins/kendoexam/css/fontawesome-all.min.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/flag-icon.min.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/weather-icons.min.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/kendo.ui.widgets.icon.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/kendo-edit.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/bootstrap.min.css" rel="stylesheet">
<%--<link href="<%=basePath%>static/ace14/assets/css/bootstrap.css" rel="stylesheet" />--%>
<%--<link id="Amikoko" href="<%=basePath%>/plugins/kendoexam/css/themes/theme_default.min.css" rel="stylesheet">
<link href="<%=basePath%>/plugins/kendoexam/css/amikoko.admin.css" rel="stylesheet">--%>
<script src="<%=basePath%>/plugins/kendoexam/js/jquery.min.js"></script>
<script src="<%=basePath%>/plugins/kendoexam/js/kendo.all.min.js"></script>
<script id="IKKI" src="<%=basePath%>/plugins/kendoexam/js/global/kendo.zh-CHS.js"></script>
<script src="<%=basePath%>/plugins/kendoexam/js/ikki.js"></script>
<style type="text/css">
html,body{
border-width: 0;
height: 100%;
padding: 0px;
margin: 0px;
font: 13px "Microsoft YaHei";
font-family: PingFangSC-Regular,Microsoft YaHei,SimSun,Arial,Helvetica,Verdana,sans-serif !important;
}
.tdgray{
background-color: #F7F7F7;
text-align:right;
padding-top: 15px;
width: 100px;
line-height: 30px;
height: 30px;
}
.tdvalue{
background-color: #ffffff;
padding-top: 19px;
width: 120px;
}
.k-grid td ,.k-grid th {
border-bottom: 1px solid #dee2e6;
}
.table td, .table th {
padding: .75rem;
vertical-align: middle;
border-top: 1px solid #dee2e6;
}
.k-switch-handle {
border-radius: 6em;
width:40px;
height: 25px;
}
form {
margin-block-end: 0em;
}
.k-dialog-titlebar {
border-color: inherit;
color: #000000;
background-color: #f6f6f6;
}
</style>
</head>
<body>
<form id="editform">
<table class="table">
<tr>
<td width="100px" class="tdColor" style="white-space: nowrap">PKID：<span style="color:red">*</span></td>
<td>
<input id="pkid" name="pkid" class="k-textbox" type="text" style="width:100%;" maxlength="50" />
</td>
</tr>
<tr>
<td width="100px" class="tdColor" style="white-space: nowrap">GCMC：<span style="color:red">*</span></td>
<td>
<input id="gcmc" name="gcmc" class="k-textbox" type="text" style="width:100%;" maxlength="50" required="required" />
<div class="card-body">
<input id="widthSwitch" type="checkbox">
</div>
</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="k-icon k-i-check"></span> 保存</button>
<button type="reset" id="sreset" class="k-button k-button-icontext k-grid-add" style="display:none"><span class="k-icon k-i-reset-sm"></span> 重置</button>
<button type="button" id="btncancel" class="k-button k-button-icontext k-grid-add" οnclick="javascript: editdiv.close()"><span class="k-icon k-i-cancel"></span> 取消</button>
</td>
</tr>
</table>
<%-- <table class="table table-bordered">--%>
<%-- <tr>--%>
<%-- <td class="tdgray">身份证号:</td>--%>
<%-- <td colspan="7">--%>
<%-- <input class="k-textbox" type="text" style="width:100%;" maxlength="50" />--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray" >姓名:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- <input id="textSwitch" type="checkbox" checked alt="111" data-change="lock">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >民族:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- <input class="w-100" id="widthNumericTextBox" type="number">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >籍贯:</td>--%>
<%-- <td class="tdvalue" >--%>
<%-- <input type="checkbox" id="eq1" class="k-checkbox" checked="checked">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >是否有效:</td>--%>
<%-- <td class="tdvalue" >--%>
<%-- <input type="radio" name="engine" id="engine1" class="k-radio" checked="checked">--%>
<%-- <input type="radio" name="engine" id="engine" class="k-radio">--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray" >人员身份:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray">联系方式一:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >参加工作时间:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray">是否享受荣誉津贴:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray" >政治面貌:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >婚姻状况:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >户口类型:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- <td class="tdgray" >所属银行:</td>--%>
<%-- <td class="tdvalue">--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray">允许注册:</td>--%>
<%-- <td colspan="7">--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- <tr>--%>
<%-- <td class="tdgray">个人简介:</td>--%>
<%-- <td colspan="7">--%>
<%-- <textarea rows="10" cols="30" style="width: 100%" id="grjj" name="grjj" ></textarea>--%>
<%-- </td>--%>
<%-- </tr>--%>
<%-- </table>--%>
</form>
<div class="k-loading-image" id="loading" style="display: none;"></div>
<script>
//Form弹窗
var editdiv="";
//grid
var grid="";
</script>
<script>
$(function(){
$("#btncancel").click(function () {
window.parent.editdiv.close();
});
//保存按钮点击事件 添加和修改
$("#btnPro").click(function (e) {
e.preventDefault();
var $form = $("#editform");
var data = $form.serializeObject(); //序列化表单的值
$.ajax({
type: "post",
url:"<%=basePath%>xmJbxx/ajaxSavexmJbxx", //添加的后台地址
//contentType: "application/json",
data: data, //传到后台的数据（表单填写的数据）
beforeSend: function () { //准备事件
kendo.ui.progress($form, true); //显示请等待图片
$("#btnPro").attr('disabled', 'disabled'); //禁止保存按钮
$("#btnPro").text("保存中...");//修改该保存按钮的文本
},
success: function (resp) { //返回事件
debugger;
kendo.ui.progress($form, false); //显示请等待图片
$("#btnPro").removeAttr('disabled');
$("#btnPro").text("保存");
if (resp.state == "true") {
window.parent.editdiv.close(); //关闭弹窗
window.parent.grid.dataSource.page(1);//刷新Grid
Swal.fire({
position: 'top-end',
type: 'success',
title: '保存成功',
showConfirmButton: false,
timer: 1500
})
}
else {
//kendo.alert(resp);
Swal.fire({
position: 'top-end',
type: 'success',
title: resp.msg,
showConfirmButton: false,
timer: 1500
})
}
},
complete: function () {//ajax 完成事件
}
})
})
function delete_click() { //删除事件
// var $form = $("#editform");
// var sele = grid.select(); // 获取要删除行
// if (sele.length == 0) {
// kendo.alert("请选择要删除的行的数据")
// return;
// }
// debugger;
// var id = grid.dataItem(sele[0]).StudentID; //获取要删除的StudentID
var ids = grid.selectedKeyNames();
if (ids.length == 0) {
kendo.alert("请选择要删除的行的数据");
return;
}
$('#loading').show();
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: '确定删除吗?',
text: "删除后无法找回,请慎重!",
type: 'warning',
showCancelButton: true,
confirmButtonText: '确定删除!',
cancelButtonText: '取消删除',
reverseButtons: true
}).then((result) => {
if (result.value) {
swalWithBootstrapButtons.fire(
'删除!',
'删除成功',
'success'
)
} else if (
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'已经取消',
'Your imaginary file is safe :)',
'error'
)
}
})
$.post("<%=basePath%>xmJbxx/delxmJbxx",{'ids': ids.toString()},function(data){
$('#loading').hide();
if(data.state=="true"){
Swal.fire({
position: 'top-end',
type: 'success',
title: '删除成功',
showConfirmButton: false,
timer: 1500
}),
//kendo.alert('删除成功！', 'warning');
//刷新表格
grid.dataSource.page(1); //更新 Grid
}else{
kendo.alert('删除失败！', 'warning');
}
});
}
});
</script>
<script>
// 文字转换框
$('#textSwitch').kendoSwitch({
checked: true,
width:50,
messages: {
checked: "是",
unchecked: "否",
}
});
// 无箭头数字框
$('#widthNumericTextBox').kendoNumericTextBox({
spinners: false,
decimals: 2,
restrictDecimals: true,
value: 3.14
});
</script>
</body>
</html>