KendoGrid 行编辑下拉查找，comb版+grid版

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

效果图

 

源码

<%@ 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-button-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) {
                        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: "&nbsp;", 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>
Teln_小凯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Kendo UI:Grid中单元格为下拉框/时间控件等
sun
11-27 6190
问题 Grid中如何自定义单元格input框的类型，如下拉框，时间控件等？ 解决方案 通过editor选项设置，如下拉框类型（以ComboBox为例） { field: "pageLayoutTemplateId", title: "布局模板*", width: 100,
KendoUI Row绑定下拉菜单.note有很多类似的地方
火麒马
12-13 235
KendoUI Row绑定下拉菜单.note有很多类似的地方 1、 下面这个是对下拉的时间选择器的触发，只要选择的值改变就触发 <input id="txt_orderDate" data-bind="value: conditionModel.orderDate" /> //只要时间选择器的值有编号就触发change $("#txt_orderDate").kendoDate...
KendoGrid 批量编辑-之删除单独做
℡メ㏑╭ァ小凯
03-09 634
说明：带新增，编辑这种批量修改，带删除的时候也需要保存之后再提交，这里把他提出来了 var gd =$('#grid').data('kendoGrid'); gd.removeRow(delRow,true); 主要原理重写了kendo.all.js removeRow(delRow,true); 这个方法 <%@ page language="java" conte...
KendoUI Row绑定下拉菜单
weixin_30466421的博客
07-27 144
$("#SalleGrid").kendoGrid({ dataSource: { transport: { read: { dateType: 'application/json', url: '/SalesTicket/Sing...
KendoUI Grid 服务器分页（可选单页显示数据量）
weixin_30457881的博客
07-13 1517
1 <div id="parent"> 2 <div id="grid"></div> 3 </div> 1 var dataSource = new kendo.data.DataSource({ 2 transport: { 3 rea...
PropertyGrid 下拉式和弹出编辑框的实现
09-23
在这个主题中，我们将深入探讨如何实现`PropertyGrid`控件中的下拉式和弹出编辑框。 首先，`PropertyGrid`控件本身并不直接支持自定义的编辑器，但它允许我们通过实现`ITypeDescriptorContext`、`...
Winform 属性编辑器 propertyGrid示例 下拉列表框
02-01
总结起来，`Winform`的`PropertyGrid`配合自定义的`UITypeEditor`可以实现属性编辑器的丰富功能，如本例所示的下拉列表框。通过这种方式，我们可以为用户提供更加直观和便捷的配置界面，提升应用的用户体验。在实际...
stringGrid_delphi_stringgriddelphi_delphi下拉grid_
09-30
标题"stringGrid_delphi_stringgriddelphi_delphi下拉grid_"所提到的就是这种需求，即在Delphi的StringGrid控件的某个单元格中嵌入Combobox，以便用户可以方便地进行选择操作。 要实现这个功能，首先需要了解...
FineUIgrid下拉grid
10-20
在Grid中，下拉列表常用于单元格编辑，提供了一种高效的选择方式。 3. **下拉grid扩展实例**：这个描述可能指的是在Grid的某个列中使用下拉列表，并且该列表本身也是一个Grid，这样的设计允许用户从大量的关联数据...
listview下拉刷新+侧滑+上拉加载（改进版）
12-14
"listview下拉刷新+侧滑+上拉加载（改进版）"这个主题涉及到的技术点主要包含以下几个方面： 1. **下拉刷新**： 下拉刷新通常用于更新列表中的数据，当用户下拉ListView时，会显示一个加载动画，并在后台加载新的...
Kendo UI Grid 用法详细整理
热门推荐
yzh的博客
12-12 2万+
在使用Kendo UI进行前端开发过程中，我们用的最多的可能就是数据表格Grid。在此文中，我将我所用到和知道的grid数据校验、数据绑定、数据操作、动态列加载、合并行/列/头、点击事件、内置事件、单元格跳转、提示框、全选、行移动、状态栏添加合计、轮播效果和分组折叠等用法，做了一个十分详细的整理，同时在其中也有很多grid操作的实际案例补充，如果有耐心看完，将能在使用Kendo UI grid时，用的更加灵活，加油吧。 知识无极限，与你来相见，欢迎点赞支持！...
Kendo UI:Grid自定义command实现对行数据的操作
潘晓宇(panxiaoyu)的专栏
08-06 1896
http://blog.csdn.net/sun_jy2011/article/details/41546467 问题 Grid中如何自定义操作列？ 解决方案 通过click选项设置，如 [html] view plain copy {           name: "details",           cl
kendoUI下拉框
Chenzhangjing66的博客
05-22 5200
kendoUI下拉框之固定值选项： 在$("#demo_grid").kendoGrid的columns中设置属性“isEnable”是固定值为“Yes”/“No”的下拉列表:     { field: "isEnable",      /*title: "",此处标题设置国际化*/ title: "isEnable",     attributes: {style: "font-si
kendo UI gridview绑定下拉框示例
流光岁月的专栏
09-03 8274
AutoEventWireup="true" CodeBehind="UKeyApplyHasReview.aspx.cs" Inherits="UserRegister.SysManage.UKeyApplyHasReview" %>                                 ul, li         {             m
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
Grid行中下拉框的选择显示
Evan_C_Tan的博客
10-21 312
{ field: 'CENTRALIZEDPURCHASELEVEL', title: '@SRM.Helper.LanguageHelper.GetLangText("CentralizedPurchaseLevel")', width: 100, editor: function (container, options) { DropDownEditor(container, options, "C.
解决Kendo ComboBox显示多列走样 （备忘）
chelen_jak的专栏
09-20 2047
自定一个ComBoBox代码： var PubCOTypeCmb = kendo.ui.DataComboBox.extend({ options: { name: "PubCOTypeCmb", boName: "PubCOType", methodName: "GetCOTypeList",
winform propertygrid下拉项
最新发布
12-14
总的来说，通过在属性上设置 System.ComponentModel 属性特性，并将该属性绑定到 PropertyGrid 控件中，我们可以实现 WinForm PropertyGrid 控件中的下拉项功能，方便用户进行属性的选择和编辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值