`

kendo grid inline mode 选择一列的值,自动将次列的其他值插入其他列

 
阅读更多

打开JS bin,输入以下代码:

 

<!DOCTYPE html>

<html>

<head>

    <title>KendoUI Test Page</title>

    

    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />

    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />

    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />

    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" />

 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>

    <script src="http://demos.kendoui.com/content/shared/js/products.js"></script>

</head>

<body>

    <div id="grid"></div>

    <script>

 

        var dataSource = new kendo.data.DataSource({

            pageSize: 20,

            data: products,

            autoSync: true,

            schema: {

                model: {

                    id: "ProductID",

                    fields: {

                        ProductID: { editable: false, nullable: true },

                        ProductName: { validation: { required: true } },

                        Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },

                        UnitPrice: { type: "number", validation: { required: true, min: 1} }

                    }

                }

            }

        });

 

        $("#grid").kendoGrid({

            dataSource: dataSource,

            pageable: true,

            height: 430,

            toolbar: ["create"],

            columns: [

            { field:"ProductName",title:"Product Name" },

            { field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },

            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },

            { command: "edit", title: " ", width: "90px" }],

            editable: "inline"

        });

 

        function categoryDropDownEditor(container, options) {

            $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')

            .appendTo(container)

            .kendoDropDownList({

                //autoBind: false,

                dataSource: {

                    type: "odata",

                    transport: {

                        read: "http://demos.kendoui.com/service/Northwind.svc/Categories"

                    }

                },

                select: function(e) {

                  e.preventDefault();

                    var grid = $("#grid").data("kendoGrid"),

                        model = grid.dataItem(this.element.closest("tr"));

                  console.log(e.sender.dataSource._data[e.sender.selectedIndex]);

                    var selectedObject=e.sender.dataSource._data[e.sender.selectedIndex];

                  //model.set("ProductName",selectedObject.Description);

                    model.ProductName = selectedObject.Description;

                    model.UnitPrice = 100;

                  grid.element.find("tr[data-uid='" + model.uid + "'] td:eq(" + 0 + ")").text(selectedObject.Description);

                  grid.element.find("tr[data-uid='" + model.uid + "'] td:eq(" + 2 + ")").text(100);

                   // grid.refresh();

                  

                }

            });

        }

        </script>

</body>

</html>

分享到:
评论

相关推荐

    mvc4中运用datagrid

    Kendo UI的Grid控件提供了更丰富的功能,包括编辑模式、行选择、分组、过滤、排序、分页等。在MVC4中,首先需要引入Kendo UI的JavaScript和CSS资源,然后在视图中定义Grid: ```html @(Html.Kendo().Grid(Model) ...

    手撕源码C++哈希表实现:从底层原理到性能优化,看完面试官都怕你!(文末附源码)

    哈希表源码

    sun_3ck_03_0119.pdf

    sun_3ck_03_0119

    MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost时间序列预测(含模型描述及示例代码)

    内容概要:本文档详细介绍了基于 MATLAB 实现的 LSTM-AdaBoost 时间序列预测模型,涵盖项目背景、目标、挑战、特点、应用领域以及模型架构和代码示例。随着大数据和AI的发展,时间序列预测变得至关重要。传统方法如 ARIMA 在复杂非线性序列中表现欠佳,因此引入了 LSTM 来捕捉长期依赖性。但 LSTM 存在易陷局部最优、对噪声鲁棒性差的问题,故加入 AdaBoost 提高模型准确性和鲁棒性。两者结合能更好应对非线性和长期依赖的数据,提供更稳定的预测。项目还展示了如何在 MATLAB 中具体实现模型的各个环节。 适用人群:对时间序列预测感兴趣的开发者、研究人员及学生,特别是有一定 MATLAB 编程经验和熟悉深度学习或机器学习基础知识的人群。 使用场景及目标:①适用于金融市场价格预测、气象预报、工业生产故障检测等多种需要时间序列分析的场合;②帮助使用者理解并掌握将LSTM与AdaBoost结合的实现细节及其在提高预测精度和抗噪方面的优势。 其他说明:尽管该模型有诸多优点,但仍存在训练时间长、计算成本高等挑战。文中提及通过优化数据预处理、调整超参数等方式改进性能。同时给出了完整的MATLAB代码实现,便于学习与复现。

    免费1996-2019年各地级市平均工资数据

    1996-2019年各地级市平均工资数据 1、时间:1996-2019年 2、来源:城市nj、各地级市统计j 3、指标:平均工资(在岗职工) 4、范围:295个地级市

    [AB PLC例程源码][MMS_040384]Winder Application.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    C2Former: 解决RGB-红外物体检测中模态校准与融合不精确问题的标定互补变压器

    内容概要:本文介绍了一种新颖的变压器模型C2Former(Calibrated and Complementary Transformer),专门用于解决RGB图像和红外图像之间的物体检测难题。传统方法在进行多模态融合时面临两个主要问题——模态错位(Modality miscalibration)和融合不准确(fusion imprecision)。作者针对这两个问题提出采用互模交叉注意力模块(Inter-modality Cross-Attention, ICA)以及自适应特征采样模块(Adaptive Feature Sampling, AFS)来改善。具体来说,ICA可以获取对齐并且互补的特性,在特征层面进行更好的整合;而AFS则减少了计算成本。通过实验验证了基于C2Former的一阶段和二阶段检测器均能在现有公开数据集上达到最先进的表现。 适合人群:计算机视觉领域的研究人员和技术人员,特别是从事跨模态目标检测的研究人员,对Transformer架构有一定了解的开发者。 使用场景及目标:适用于需要将可见光和热成像传感器相结合的应用场合,例如全天候的视频监控系统、无人驾驶汽车、无人

    上海人工智能实验室:金融大模型应用评测报告-摘要版2024.pdf

    上海人工智能实验室:金融大模型应用评测报告-摘要版2024.pdf

    malpass_02_0907.pdf

    malpass_02_0907

    C++-自制学习辅助工具

    C++-自制学习辅助工具

    微信生态系统开发指南:涵盖机器人、小程序及公众号的技术资源整合

    内容概要:本文提供了有关微信生态系统的综合开发指导,具体涵盖了微信机器人的Java与Python开发、全套及特定应用的小程序源码(PHP后台、DeepSeek集成),以及微信公众号的基础开发与智能集成方法。文中不仅给出了各种应用的具体案例和技术要点如图灵API对接、DeepSeek大模型接入等的简述,还指出了相关资源链接以便深度探究或直接获取源码进行开发。 适合人群:有意开发微信应用程序或提升相应技能的技术爱好者和专业人士。不论是初涉者寻求基本理解和操作流程,还是进阶者期望利用提供的资源进行项目构建或是研究。 使用场景及目标:开发者能够根据自身兴趣选择不同方向深入学习微信平台的应用创建,如社交自动化(机器人)、移动互联网服务交付(小程序),或者公众信息服务(公众号)。特别是想要尝试引入AI能力到应用中的人士,文中介绍的内容非常有价值。 其他说明:文中提及的多个项目都涉及到了最新技术栈(如DeepSeek大模型),并且为不同层次的学习者提供从零开始的详细资料。对于那些想要迅速获得成果同时深入了解背后原理的人来说是个很好的起点。

    pimpinella_3cd_01_0916.pdf

    pimpinella_3cd_01_0916

    mellitz_3cd_01_0516.pdf

    mellitz_3cd_01_0516

    schube_3cd_01_0118.pdf

    schube_3cd_01_0118

    [AB PLC例程源码][MMS_046683]ME Faceplates for 1738 Digital and Analog I-O with Descriptions.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_040371]Communication between CompactLogix Controllers on DeviceNet.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_046507]SE Faceplates for 1797 Digital and Analog I-O.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    智慧用电平台建设解决方案【28页】.pptx

    智慧用电平台建设解决方案【28页】

    lusted_3ck_01_0519.pdf

    lusted_3ck_01_0519

    HCIP作业1 这里面是完成的ensp的拓扑图

    HCIP作业1 这里面是完成的ensp的拓扑图

Global site tag (gtag.js) - Google Analytics