KendoGrid 行编辑下拉查找,comb版+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-button-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.key=$("#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: "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' }, { field: 'GYSMC', title: '名称' } ], 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 } { 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>