KendoUI Grid 增删改查功能前台+后台

自己做记录的

效果图

核心后台：查询+分页用，其他的返回常规做就行了

分页代码

/// <returns></returns>
@RequestMapping(value="/ajaxxmJbxxList",produces = "application/json;charset=UTF-8")
@ResponseBody
public String  ajaxxmJbxxList(Page page)throws Exception{String jsonArr = "[]";EasyuiUtil.setDgParamterForKendo(getRequest(),page);String pkid = StringUtil.null2blank(getRequest().getParameter("pkid"));String gcmc = StringUtil.null2blank(getRequest().getParameter("name"));page.getPd().put("sqlId","xmJbxxExtMapper.getxmJbxxListForManagerlistPage");page.getPd().put("gcmc",gcmc);List<PageData> list = xmJbxxServiceImpl.getxmJbxxPageDataListBySqlId(page);jsonArr = EasyuiUtil.list2KendoJsonArray(list, page.getTotalPage(),page.getCurrentPage(),page.getTotalResult());return jsonArr;
}

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" />&nbsp;<button type="button" id="btnSearch" class="k-button"><span class="k-icon k-i-search"></span>&nbsp;查询</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>&nbsp;新增</button><button id="btnEdit" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-i-edit"></span>&nbsp;修改</button><button id="btnDelete" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-i-close"></span>&nbsp;删除</button>
<%--        <button id="btnDiag" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-i-search"></span>&nbsp;删除</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>&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" οnclick="javascript: editdiv.close()"><span class="glyphicon glyphicon-ban-circle"></span>&nbsp;取消</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="";//gridvar 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)中的 demoCondiionsgrid.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",     // 内容urltype: "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;     //获取当前点击按钮的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();  //获取选中的一行/*//选中多行的写法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=";    // 内容urlif (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);//刷新GridSwal.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; //获取要删除的StudentIDvar 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>

eidt页面代码

<%@ 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>&nbsp;保存</button>&nbsp;&nbsp;<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>&nbsp;重置</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>&nbsp;取消</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="";//gridvar 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);//刷新GridSwal.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; //获取要删除的StudentIDvar 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>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

angularjs ui-grid cellTemplate checkbox ng-checked
{ name: Localizer["ActiveInd"], field: ActiveInd, enableSorting: false, width: 100, cellTemplate: <input type"checkbox" ng-checkedrow.entity.ActiveInd"Y"?true:false disabled /> },...
2024/5/1 22:16:43
ui-grid 列拖拽问题
angular 的 ui-grid 在项目中使用时出现了列拖拽时，拖拽的表头跟不上鼠标的问题，特写了个小 demo 查找问题所在，结果发现了另一个拖拽问题：有横向滚动条时，拖拽的元素看不见，虽然拖拽效果是好使的。。。把…...
2024/5/1 23:55:32
解决Angular Kendo UI 导出PDF中文乱码
在使用 Kendo UI for Angular 的 PDFExportComponent 组件时，如果内容是中文则导出PDF将会出现乱码，网上许多人认为是官方不支持中文，但其实不然，阅读文档 The PDF Export component supports the Unicode standard only if the …...
2024/5/1 23:32:51
AngularJS Angular-ui-bootstrap日期控件DatePicker中文国际化
在AngularJS 官网：https://code.angularjs.org/1.0.8/i18n/下载国际化资源：https://code.angularjs.org/1.0.8/i18n/angular-locale_zh-cn.js复制以下代码： $provide.value("$locale", {"DATETIME_FORMATS": {"AMPM…...
2024/5/1 22:10:47
angular-ui-grid merge cells in column(合并列上的单元格)
问题：I would like to pull a feature request that you implement a rowspan over 2 or more rows. This feature greatly help me improving my cell templates when I have a double lessons to prepare! It should be possible to decide during runtime wether…...
2024/5/2 3:33:38
kendo ui grid 高度自适应
最近项目中要求表格的高度能够占满整个页面，并且能够自适应，即随页面的改变而变化； 项目用的是kendo ui ， 思路，分两部 1，找到占满整个页面的表达式 2，自适应具体实现代码方法： …...
2024/5/2 2:28:16
kendoui grid之合并单元格
$(document).ready(function(){/*** return false;——跳出所有循环；相当于 javascript 中的 break 效果。* return true;——跳出当前循环，进入下一个循环;*/var basePath $(#contextPath).val();/*** grid相关的数据*/var commonGrids$("div[xr-…...
2024/5/2 1:05:52
angularjs ui-grid 控制列是否允许被编辑
cellEditableCondition: function ($scope) { return $scope.row.entity.isEditable } 原始地址：https://stackoverflow.com/questions/22051660/dynamic-enablecelledit...
2024/5/2 0:00:38
二、ionic如何使用外链
1、ionic如何使用外链并返回原有页面？html如下：对应的controller如下： (function() {angular.module(app).controller(extraLinkCtrl, extraLinkCtrl);extraLinkCtrl.$inject [$scope,$stateParams,$state];function extraLinkCtrl($scope, …...
2024/4/21 3:43:41
Ionic开发App中重要的部分
写在前面 APP赶在了春节之前上线了，所以这次我们分享一下使用Ionic3 Angular5构建一个Hybird App过程中的经验。什么是Hybird App以及一些技术的选型这里就不讨论了。我每次完成一个部分就写一部分，所以有文章有点长。如果有错误的地方感谢大家指正~ 为…...
2024/4/21 3:43:40
angular项目如何配置国际化（i18n）？
1、下载ngx-translate的依赖库 //利用npm来安装ngx-translate依赖 npm install ngx-translate/core --save npm install ngx-translate/http-loader --save 2、在项目根模块app.module.ts中引入引入TranslateModule模块 import { BrowserModule } from angular/platform-brows…...
2024/4/21 3:43:40
ionic之如何应用karma进行单元测试
所有文章，首发于CSDN 原文链接地址 karma测试 1. 创建ionic项目 ionic start ionic-testing tabscd ionic-testing 2. 安装karma插件 npm install karma karma-jasmine karma-phantomjs-launcher --save-dev --registryhttps://registry.npm.taobao.org 3. 为…...
2024/4/21 22:37:19
AngularJS 常见面试问题
问题来源： 如何衡量一个人的 AngularJS 水平？ ng-if 跟 ng-show/hide 的区别有哪些？ 第一点区别是， ng-if 在后面表达式为 true 的时候才创建这个 dom 节点， ng-show 是初始时就创建了，用 display:block 和…...
2024/5/2 1:45:51
ionic 使用ngcordova插件
需要安装ngcordova的js文件，下载zip包，把ng-cordova.js和copy进相应的目录，在页面中引入即可 Install Get the Source File You can use bower to install ngCordova like so or download the zip file here, and locate the .js file in the…...
2024/4/20 20:02:12
Ionic step by step (1)
刚接触 ionic，一步一步学习，有错误的，望大家指出。公式 Ionic Cordova Angular2 ionic CSS Cordova: 提供了使用 JavaScript 调用 Native 功能安装全局安装 ionic 和 cordovanpm install -g cordova ionic android，需安装 J…...
2024/4/20 20:02:10
ionic4封装样式原理
查看文档： https://www.cnblogs.com/WhiteCusp/p/4342502.html https://www.jianshu.com/p/bb291f9678e1 https://github.com/adamlacombe/Shadow-DOM-inject-styles import {Component, ElementRef, OnInit} from angular/core;import {injectStyles} from shadow-…...
2024/4/20 20:02:09
angular面试题集锦
ng-if 跟 ng-show/hide 的区别有哪些？ 第一点区别是， ng-if 在后面表达式为 true 的时候才创建这个 dom 节点， ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。第二点区别是， ng-if…...
2024/4/21 3:43:37
在ionic2中自定义服务：该服务需要使用到NavController
如果在自定义的服务中的constructor中直接注入（NavControlll） private navCtrl: NavController，然后再page页面或组件中的constructor中也采用注入的方式，可能会出现这样的错误： No provider for NavController! (Your…...
2024/4/27 4:04:44
ionic 图片轮播问题
1、使用ion-slide可以实现图片轮播，但是如果在html中仅仅增加ion-slide是远远不够的，会出现两个问题： (注：使用的是angularjs。首先需要在,js文件中注入：$ionicSlideBoxDelegate) 一、有时候会出现图片无法加载出来。解…...
2024/4/21 3:43:35
Angular面试题四
二十、angular 的缺点有哪些？ 1.强约束导致学习成本较高，对前端不友好。但遵守 AngularJS 的约定时，生产力会很高，对 Java 程序员友好。 2.不利于 SEO 因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取。一种…...
2024/4/21 3:43:35

KendoUI Grid 增删改查功能前台+后台

相关文章

最新文章

KendoUI Grid 增删改查功能 前台+后台

相关文章

最新文章

KendoUI Grid 增删改查功能前台+后台