Kendo Grid 在线编辑+联动效果
效果图
代码
<%@ 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>
</head>
<body>
<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 search_btn_css"><span class="k-icon k-i-search"></span> 查询</button>
</form>
</div>
<div id="operate" style="float:left;margin-right:3px;margin-top:2px;">
<button id="btnAdd" class="k-button k-buyem datton-icontext k-notification-warning ml-1 k-grid-add add_btn_css">
<span class="k-icon k-i-plus"></span> 新增</button>
<button id="btnSubmit" class="k-grid-save-changes" style="display: none;">真正保存按钮</button>
<button id="btnEdit" class="k-button k-button-icontext edit_btn_css">
<span class="k-icon k-i-check"></span> 保存</button>
<%-- <button id="btnDelete" class="k-button k-button-icontext k-grid-cancel-changes del_btn_css">--%>
<%-- <span class="k-icon k-i-cancel"></span> 撤销</button>--%>
</div>
</script>
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid=null;
var crudServiceBaseUrl = "<%=basePath%>",
dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
debugger;
//查询字段---这里 大哥
options.data.gysmc=$("#s_demo_title").val();
readItem(options, '<%=basePath%>xmJbxx/ajaxxmJbxxForRowEditList');
},
create: function (options) { createItem(options, '<%=basePath%>/xmJbxx/ajaxSaveXmJbxxForRow') },
update: function (options) { updateItem(options, '<%=basePath%>/xmJbxx/ajaxSaveXmJbxxForRow') },
//destroy: function (options) { destroyItem(options, '<%=basePath%>/xmJbxx/ajaxDelxmJbxxForRow') },
},
//batch: true,
pageSize: 100,
schema: {
model: {
id: "PKID",
fields: {
rowNumber:{editable: false, nullable: true},
PKID: {editable: false, nullable: true},
GCMC: {validation: {required: true}}
}
}
}
});
grid = $("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
//height: 550,
toolbar: [
{ template: kendo.template($("#gridbar").html()) } //头部按钮 template: 绑定模板
],
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: {
refresh: true,
//pageSizes: true,
buttonCount: 5,
page: 1,
//pageSize: 100,
pageSizes: ['all',100, 200, 300],
messages: {
display: "显示 {0}-{1} 共 {2} 项",
empty: "没有数据",
itemsPerPage: "每面显示数量",
first: "第一页",
last: "最后一页",
next: "下一页",
previous: "上一页"
}
},
columns: [
{locked: true,width:"80px",
field: "rowNumber",
title: "序号",
template: "<span class='row-number'></span>",
headerAttributes: {
"class": "table-header-cell",
style: "text-align: center"
},
attributes: {
"class": "table-cell",
style: "text-align: center"
}
},
{ field: "PKID", title: "PKID", width: "300px", hidden:true},
{ field: "GCMC", title: "GCMC", 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;"},
editor: function (container, options) {
debugger;
$('<input name="GYSMC" data-bind="value: '+ options.field +'">')
.appendTo(container)
.kendoMultiColumnComboBox({
dataSource: {
serverFiltering: true,
transport: {
read: function (options) {
if(options.data.filter.filters.length==0){
options.success({data:[]});
return;
}
if(options.data.filter.filters[0].value!=''){
$.post('<%=basePath%>GysJbxx/ajaxGetGysJbxxByName',{q:options.data.filter.filters[0].value},function(res){
options.success(res);
});
}
}
},
schema: {
data: 'data'
}
},
columns: [
{ field: 'GYSID', title: 'ID',width:200 },
{ field: 'GYSMC', title: '名称',width:200 }
],
dataValueField: 'GYSMC',
dataTextField: 'GYSMC',
filter: "contains",
autoBind: false,
minLength: 1,
});
<%--$('<input name="GCMC" data-bind="value: '+ options.field +'">')--%>
<%-- .appendTo(container)--%>
<%-- .kendoAutoComplete({--%>
<%-- dataSource: {--%>
<%-- serverFiltering: true,--%>
<%-- transport: {--%>
<%-- read: function (options) {--%>
<%-- if(options.data.filter.filters[0].value!=''){--%>
<%-- $.post('<%=basePath%>GysJbxx/ajaxGetGysJbxxByName',{q:options.data.filter.filters[0].value},function(res){--%>
<%-- options.success(res);--%>
<%-- });--%>
<%-- }--%>
<%-- }--%>
<%-- },--%>
<%-- schema: {--%>
<%-- data: 'data'--%>
<%-- }--%>
<%-- },--%>
<%-- dataTextField: 'GYSMC',--%>
<%-- placeholder: '',--%>
<%-- filter: 'contains',--%>
<%-- delay: 300,--%>
<%-- minLength: 1,--%>
<%-- enforceMinLength: true--%>
<%-- });--%>
}
},
//{ command: "destroy", title: " ", width: 150 }
{ field: "ZJLY", title: "一级ID", width: "150px"},
{ field: "XMZT", title: "一级", width: "150px"
//,template: '#= LXZT.name #'
// ,values: [
// { text: '男', value: '1' },
// { text: '女', value: '2' }
// ]
,editor: function (container, options) {
//获取grid表格的某一行
//var rowData1 = grid.dataSource.at(indexS);
//设置某列的新值
//rowData1.set("connect","OK");
//当前的数据
var curData = options.model;
//下级清空测试
curData.SFTSXM="";
curData.JGRQ="";
$('<select name="LXZT" data-bind="value: '+ options.field +'"></select>')
.appendTo(container)
.kendoDropDownList({
dataSource: {
transport: {
read: function (options) {
$.post("<%=basePath%>Wzjc/ajaxGetWzjcFlList?sslb=0",function(data){
options.success(data);
});
}
},
schema: {
data: 'data'
}
},
optionLabel: '-= 请选择 =-',
dataValueField: 'WLMC',
dataTextField: 'WLMC',
select:function(options){
curData.ZJLY =options.dataItem.WLBM;
},
close: function (optins) {
$("#grid").data("kendoGrid").refresh();
}
});
}},
{ field: "JGRQ", title: "二级ID", width: "150px"},
{ field: "SFTSXM", title: "二级", width: "150px"
,editor: function (container, options) {
//一级编码 curData.="";
var curData = options.model;
var yjCode=options.model.ZJLY;
$('<select name="SFTSXM" data-bind="value: '+ options.field +'"></select>')
.appendTo(container)
.kendoDropDownList({
dataSource: {
transport: {
read: function (options) {
debugger;
$.post("<%=basePath%>Wzjc/ajaxGetWzjcFlList?sslb="+yjCode,function(data){
options.success(data);
});
}
},
schema: {
data: 'data'
}
},
optionLabel: '-= 请选择 =-',
dataValueField: 'WLMC',
dataTextField: 'WLMC',
select:function(options){
curData.JGRQ =options.dataItem.WLBM;
},
close: function (optins) {
$("#grid").data("kendoGrid").refresh();
}
});
}
},
{ title: '操作', width: '100px',
command: [
{ name: 'del', text: '删除',
iconClass: 'k-icon k-i-close',
click: function (e) {
e.preventDefault();
var gd =$('#grid').data('kendoGrid');
var delRow=$(e.target).closest('tr');
var row=this.dataItem(delRow);
if(row.isNew()){
gd.removeRow(delRow,true);
return;
}
if(confirm("确定删除?")==false){
return false;
}
var newJson = JSON.parse(JSON.stringify(row));
delItem({ids:newJson.PKID}, '<%=basePath%>/xmJbxx/ajaxDelxmJbxxForRow',function(){
gd.removeRow(delRow,true);
});
}
}
]
},
],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: true
});
$("#btnSearch").click(function () {
$('#grid').data('kendoGrid').dataSource.page(1);
$('#grid').data('kendoGrid').dataSource.read();
});
$("#btnEdit").click(function () {
var addData = $('#grid').data('kendoGrid').dataSource.data();
var flag=true;
var msg="";
for (var i=0;i<addData.length;i++){
var item =addData[i];
if(item.isNew()==false){
continue;
}
if(item.GCMC==null || $.trim(item.GCMC)==""){
msg="第"+(i+1)+"行第工程名称不能为空";
flag=false;
break;
}
}
if(flag==false){
alertMsg(msg, 'warning');
return;
}
$("#btnSubmit").click();
});
});
</script>
</body>
</html>