KendoUI 在线编辑多级联动

最新推荐文章于 2023-01-17 10:49:08 发布
最新推荐文章于 2023-01-17 10:49:08 发布
阅读量674 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq873113580/article/details/104979831
版权

以下代码是7级联动效果

 代码

<%@ 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" />&nbsp;
            <button type="button" id="btnSearch" class="k-button search_btn_css"><span class="k-icon k-i-search"></span>&nbsp;查询</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>&nbsp;新增</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>&nbsp;保存</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>&nbsp;撤销</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) {
                        options.data.gysmc=$("#s_demo_title").val();
                        readItem(options, '<%=basePath%>WzCgsqmx/ajaxWzCgsqmxForRowEditList');
                    },
                    create: function (options) { createItem(options, '<%=basePath%>/WzCgsqmx/ajaxSaveWzCgsqmxForRow') },
                    update: function (options) { updateItem(options, '<%=basePath%>/WzCgsqmx/ajaxSaveWzCgsqmxForRow') },
                    //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},
                            //WLBM: {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,//当设置成true，通过点击列投的图标Grid将显示列菜单。列菜单允许用户控制显示或者关闭列，过滤和排序（当过滤和排序被允许）。默认情况列菜单不被允许。
            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: [
                { field: "PKID", title: "PKID", width: "300px", hidden:true},

                { field: "CLYT", title: "工程ID", width: "300px", hidden:true},
                { field: "GCMC", title: "工程名称", width: "300px",
                    //列标题居中
                    headerAttributes: {"class": "table-header-cell",style: "text-align:left;"},
                    //列数据居左
                    attributes: {style: "text-align:left"},
                    //列数据过长时，不换行，简略为 " ... "
                    attributes: {style: "white-space:nowrap;text-overflow:ellipsis;"},
                    editor: function (container, options) {
                        var curData = options.model;
                        $('<input name="GCMC" 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%>xmJbxx/ajaxGetXmJbxxByName',{q:options.data.filter.filters[0].value},function(res){
                                                    options.success(res);
                                                });
                                            }
                                        }
                                    },
                                    schema: {
                                        data: 'data'
                                    }
                                },
                                columns: [
                                    //{ field: 'PKID', title: 'PKID',width:100, hidden:true },
                                    { field: 'XMID', title: '项目编号',width:120 },
                                    { field: 'GCMC', title: '工程名称',width:300 }
                                ],
                                dataValueField: 'GCMC',
                                dataTextField: 'GCMC',
                                filter: "contains",
                                autoBind: false,
                                minLength: 1,
                                select:function(options){
                                    curData.CLYT =options.dataItem.PKID;
                                },
                                close: function (optins) {
                                    $("#grid").data("kendoGrid").refresh();
                                }
                            });
                    }
                },
                //{ command: "destroy", title: "&nbsp;", width: 150 }
                { field: "WLGGID", title: "物料大类ID", width: "150px",hidden:true},
                { field: "WLGGMC", title: "物料大类", width: "150px"
                    ,editor: function (container, options) {

                        //获取grid表格的某一行
                        //var rowData1 = grid.dataSource.at(indexS);
                        //设置某列的新值
                        //rowData1.set("connect","OK");

                        //当前的数据
                        var curData = options.model;
                        //下级清空测试
                        curData.WLBM ="";
                        curData.WLMC ="";
                        curData.GGXH ="";
                        curData.WLMCGGXH  ="";
                        curData.JSYQ ="";
                        curData.WLMCJSYQ="";
                        curData.CZ ="";
                        curData.WLMCCZ="";
                        curData.DW ="";
                        curData.WLMCDW="";
                        $('<select name="WLGGMC" data-bind="value: '+ options.field +'"></select>')
                            .appendTo(container)
                            .kendoMultiColumnComboBox({
                                dataSource: {
                                    transport: {
                                        read: function (options) {
                                            $.post("<%=basePath%>Wzjc/ajaxGetWzjcFlList?sslb=0",function(data){
                                                options.success(data);
                                            });
                                        }
                                    },
                                    schema: {
                                        data: 'data'
                                    }
                                },
                                optionLabel: '-= 请选择 =-',
                                dataValueField: 'WLMC',
                                dataTextField: 'WLMC',
                                filter: 'contains',
                                delay: 30,
                                minLength: 1,
                                enforceMinLength: true,
                                select:function(options){
                                    curData.WLGGID =options.dataItem.WLBM;
                                },
                                close: function (optins) {
                                    $("#grid").data("kendoGrid").refresh();
                                }
                            });
                    }},
                { field: "WLBM", title: "物料名称ID", width: "150px",hidden:true},
                { field: "WLMC", title: "物料名称", width: "150px"
                    ,editor: function (container, options) {
                        //一级编码 curData.="";
                        var curData = options.model;

                        curData.GGXH ="";
                        curData.WLMCGGXH  ="";
                        curData.JSYQ ="";
                        curData.WLMCJSYQ="";
                        curData.CZ ="";
                        curData.WLMCCZ="";
                        curData.DW ="";
                        curData.WLMCDW="";
                        var yjCode=curData.WLGGID;
                        $('<select name="WLMC" data-bind="value: '+ options.field +'"></select>')
                            .appendTo(container)
                            .kendoMultiColumnComboBox({ //.kendoDropDownList({
                                dataSource: {
                                    transport: {
                                        read: function (options) {
                                            $.post("<%=basePath%>Wzjc/ajaxGetWzjcFlList?sslb="+yjCode,function(data){
                                                options.success(data);
                                            });
                                        }
                                    },
                                    schema: {
                                        data: 'data'
                                    }
                                },
                                optionLabel: '-= 请选择 =-',
                                dataValueField: 'WLMC',
                                dataTextField: 'WLMC',
                                filter: 'contains',
                                delay: 30,
                                minLength: 1,
                                enforceMinLength: true,
                                select:function(options){
                                    curData.WLBM =options.dataItem.WLBM;
                                  
                                },
                                close: function (optins) {
                                    $("#grid").data("kendoGrid").refresh();
                                }
                            });
                    }
                },
                { field: "GGXH", title: "规格型号ID", width: "150px",hidden:true},
                { field: "WLMCGGXH", title: "规格型号", width: "150px"
                    ,editor: function (container, options) {
                        //一级编码 curData.="";
                        var curData = options.model;
                        var ejCode=curData.WLBM;
                        $('<select name="WLMCGGXH" data-bind="value: '+ options.field +'"></select>')
                            .appendTo(container)
                            .kendoMultiColumnComboBox({ //.kendoDropDownList({
                                dataSource: {
                                    transport: {
                                        read: function (options) {
                                            debugger;
                                            $.post("<%=basePath%>Wlfl/ajaxGetWlflByWlbm?lb=GGXH&wlbm="+ejCode,function(data){
                                                debugger;
                                                options.success(data);
                                            });
                                        }
                                    },
                                    schema: {
                                        data: 'data'
                                    }
                                },
                                optionLabel: '-= 请选择 =-',
                                dataValueField: 'WLMC',
                                dataTextField: 'WLMC',
                                filter: 'contains',
                                delay: 30,
                                minLength: 1,
                                enforceMinLength: true,
                                select:function(options){
                                    curData.WLMCGGXH   =options.dataItem.WLBM;
                                },
                                close: function (optins) {
                                    $("#grid").data("kendoGrid").refresh();
                                }
                            });
                    }
                },
                { field: "JSYQ", title: "技术要求ID", width: "150px",hidden:true},
                { field: "WLMCJSYQ", title: "技术要求", width: "150px"
                    ,editor: function (container, options) {
                        //一级编码 curData.="";
                        var curData = options.model;
                        var ejCode=curData.WLBM;
                        $('<select name="WLMCJSYQ " data-bind="value: '+ options.field +'"></select>')
                            .appendTo(container)
                            .kendoMultiColumnComboBox({ //.kendoDropDownList({
                                dataSource: {
                                    transport: {
                                        read: function (options) {
                                            debugger;
                                            $.post("<%=basePath%>Wlfl/ajaxGetWlflByWlbm?lb=JSYQ&wlbm="+ejCode,function(data){
                                                debugger;
                                                options.success(data);
                                            });
                                        }
                                    },
                                    schema: {
                                        data: 'data'
                                    }
                                },
                                optionLabel: '-= 请选择 =-',
                                dataValueField: 'WLMC',
                                dataTextField: 'WLMC',
                                filter: 'contains',
                                delay: 30,
                                minLength: 1,
                                enforceMinLength: true,
                                select:function(options){
                                    curData.WLMCJSYQ =options.dataItem.WLBM;
                                },
                                close: function (optins) {
                                    $("#grid").data("kendoGrid").refresh();
                                }
                            });
                    }
                },
                { field: "CZ", title: "单位ID", width: "150px",hidden:true},
                { field: "WLMCCZ", title: "单位", width: "150px"
                    ,editor: function (container, options) {
                        //一级编码 curData.="";
                        var curData = options.model;
                        var ejCode=curData.WLBM;
                        $('<select name="WLMCCZ" data-bind="value: '+ options.field +'"></select>')
                            .appendTo(container)
                            .kendoMultiColumnComboBox({ //.kendoDropDownList({
                                dataSource: {
                                    transport: {
                                        read: function (options) {
                                            debugger;
                                            $.post("<%=basePath%>Wlfl/ajaxGetWlflByWlbm?lb=DW&wlbm="+ejCode,function(data){
                                                debugger;
                                                options.success(data);
                                            });
                                        }
                                    },
                                    schema: {
                                        data: 'data'
                                    }
                                },
                                optionLabel: '-= 请选择 =-',
                                dataValueField: 'WLMC',
                                dataTextField: 'WLMC',
                                filter: 'contains',
                                delay: 30,
                                minLength: 1,
                                enforceMinLength: true,
                                select:function(options){
                                    curData.WLMCCZ =options.dataItem.WLBM;
                                },
                                close: function (optins) {
                                    $("#grid").data("kendoGrid").refresh();
                                }
                            });
                    }
                },
                { field: "DW", title: "材质ID", width: "150px",hidden:true},
                { field: "WLMCDW", title: "材质", width: "150px"
                    ,editor: function (container, options) {
                        //一级编码 curData.="";
                        var curData = options.model;
                        var ejCode=curData.WLBM;
                        $('<select name="WLMCDW" data-bind="value: '+ options.field +'"></select>')
                            .appendTo(container)
                            .kendoMultiColumnComboBox({ //.kendoDropDownList({
                                dataSource: {
                                    transport: {
                                        read: function (options) {
                                            debugger; //ejCode能不能别写这样的啊，我看不懂啊
                                            $.post("<%=basePath%>Wlfl/ajaxGetWlflByWlbm?lb=CZ&wlbm="+ejCode,function(data){
                                                debugger;
                                                options.success(data);
                                            });
                                        }
                                    },
                                    schema: {
                                        data: 'data'
                                    }
                                },
                                optionLabel: '-= 请选择 =-',
                                dataValueField: 'WLMC',
                                dataTextField: 'WLMC',
                                filter: 'contains',
                                delay: 30,
                                minLength: 1,
                                enforceMinLength: true,
                                select:function(options){
                                    curData.WLMCDW =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,
            dataBound: function (e) {

                var items = e.sender.items();

                for (var i = 0; i < items.length; i++) {
                    var dataItem = e.sender.dataItem(items[i]);
                    if (dataItem.isNew() && dataItem.GCMC ==null) {
                       
                        dataItem.GCMC   ="";
                        dataItem.WLGGID  ="";
                        dataItem.WLGGMC ="";
                        dataItem.CLYT="";
                        dataItem.WLMC ="";
                        dataItem.WLBM ="";
                        dataItem.GGXH ="";
                        dataItem.WLMCGGXH  ="";
                        dataItem.JSYQ ="";
                        dataItem.WLMCJSYQ="";
                        dataItem.CZ ="";
                        dataItem.WLMCCZ="";
                        dataItem.DW ="";
                        dataItem.WLMCDW="";
                        dataItem.WLBM ="";
                        dataItem.WLMC ="";
                    }
                }
            }
        });
        $("#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>

 

Teln_小凯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用KendoUI实现下来列表的级联
taihejin的专栏
12-03 1056
最近在学习KendoUI，花了半天的时间才把下拉列表的级联功能实现，以此文章记之。 具体代码如下: function provinceChange() { var cityBox = $("#city").data("kendoComboBox"); cityBox.dataSource.read(); cityBox.text("全部"); var c
KenDoui实现无限级导航菜单
大海中的一叶孤舟
10-29 1046
这导航菜单花费了好多时间，在此记录下来，希望对有需要的朋友提供一些帮助，好了  废号不多说。。。。。  第一步，创建数据库 第二步，编写jsp页面代码    //1.创建一个空菜单 var menu = $("#menu").kendoMenu({}).data("kendoMenu"); //2.创建一个数据源
动态改变kendoGrid的数据、列和基础设置
abza7117的博客
07-20 805
1.改变数据 第一种方法： dataSource:{ transport: { read: function (operation) { var data = operation.data.data || []; operation.success(data); } ...
kendo 级联加带搜索的下拉框以及js赋值
weixin_34367845的博客
11-18 588
1‘、js给下拉框赋值 $("#UserRole").data("kendoDropDownList").value(dataItem.RoleName); $('#MultiSelectMachineMasterTypes').data('kendoMultiSelect').dataSource.read(); $("#MultiSelectMachineMasterType...
kendoUI之combobox下拉列表框
懒羊羊我小弟的博客
01-17 1482
kendoUI之combobox下拉列表框的相关配置项说明，基本实例说明
kendo ui TreeViewWithinCombox
11-13
使用kendo ui 中的combox和treeview实现下拉选框功能；使用kendo ui 中的combox和treeview实现下拉选框功能，使用kendo ui 中的combox和treeview实现下拉选框功能
Kendoui grid多级分组表格展现
03-19
应用kendoui grid实现的多级分组表格展现，里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进，增加了很多的个别需求实现，在原来的版本是做不到的。...
jQuery EasyUI编辑DataGrid用combobox实现多级联动
10-21
本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果，这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用，比如在本例中的“老师分类”和“老师细类”。...
kendo ui 实现复杂表头
10-24
该代码类里面实现的主要操作： 1.ajax 访问后代接口，并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置，这个是本人亲自写的，并且经过验证是正确的
laravel-admin的多级联动方法
10-16
在 Laravel-admin 框架中实现多级联动的方法主要涉及到数据模型、表单构建和前端交互。Laravel-admin 是基于 Laravel 的一个强大的后台管理界面构建工具，它提供了一种便捷的方式来创建美观且易于操作的后台管理系统...
kendoui | 剑道UI（最新版、完整实例、安装包）
09-05
Kendo UI framework is developed by Telerik - a leading provider of UI components for web, desktop and mobile applications. Trusted by over 100,000 customers worldwide for our devotion to quality and industry-best technical support, Telerik helps professionals maximize their productivity and "deliver more than expected" every day.
Django自关联实现多级联动查询实例
09-16
主要介绍了Django自关联实现多级联动查询实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
C#实现的多列数据绑定组合框控件MultiColumnComboBoxEx
HuLihui's Blog
02-01 1万+
(原创文章，转载请注明来源：http://blog.csdn.net/hulihui)0、前言组合框ComboBox是一个十分常用的多功能窗体控件，兼具文本框（TextBox）与列表框（ListBox）两控件的特点，并独具特性AutoCompleteMode。但笔者在实际项目开发中往往感到如下方面的不足：不能分别设置框高与项高，在调整项高ItemHeigth时也调整了组
kendo 数据绑定：data-bind
qq_38328041的博客
08-01 5079
kendo中的数据绑定data-bind跟Angularjs中的ng-model类似。Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ，这些属性可以绑定到 DOM 元素或是 Kendo U
kendoUI系列教程之DropDownList下拉菜单
热门推荐
飞鸟的博客
05-25 1万+
DropDownList其实就是select，只有下拉选择。可以把现有的select或者input渲染成下拉菜单：原码打印关于&lt;input id="color" value="1" /&gt;  &lt;select id="size"&gt;      &lt;option&gt;S - 6 3/4"&lt;/option&gt;      &lt;optio
Kendo-UI学习 下拉列表kendoDropDownList 三级联动demo
CNOYG的博客
08-07 2560
再学习kendoUi的插件中自己写个demo，加深一下印象。 1.前端html代码，当然你必须引用kendo相关的js和css。 &lt;div class="k-content"&gt; &lt;label&gt;省：&lt;/label&gt; &lt;input id="province" placeholder="请选择省..." style="wid
kendoui固定宽度_javascript – KendoUI使用图标而不是自定义命令的按钮
weixin_39933026的博客
12-22 210
您可能会覆盖KendoUI定义：.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {min-width: 0;}或者你可能会尝试减少攻击性(降低附带效应)：a.k-button.k-button-icontext.k-grid-Edit {min-width : 0;}甚至少一点：#grid a.k-button.k-but...
Vue实现一个简单的多列下拉框（MultiColumnComboBox）
affp的专栏
06-07 2125
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> ...
uniapp 多级联动
最新发布
08-18
在uniapp中，可以使用自定义picker组件实现多级联动功能，并且支持自定义配置。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* [uniapp自定义picker...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值