handlebars+kendo ui 编辑grid单元格点击事件

ゞ浴缸里的玫瑰 2023-06-07 03:17 28阅读 0赞

.hbs page

<form>
            <table>
                    <tr>
                            <td>
                                    <label style="display:inline-block;width:70px">项目年度</label>
                                    <input style="width: :160px" data-role="dropdownlist" data-text-field="year"
                                            data-value-field="id" data-bind="source:yearSource,value:queryForm.year"
                                            style="width: 160px" />
                            </td>
                            <td>
                                    <label style="display:inline-block;width:70px">用工单位</label>
                                    <input style="width: :160px" data-role="dropdownlist" data-text-field="org_name"
                                            data-value-field="org_code"
                                            data-bind="source:endUserSource,value:queryForm.userorg" style="width: 160px" />
                            </td>
                            <td>
                                    <label style="display:inline-block;width:70px">项目类别</label>
                                    <input style="width: :160px" data-role="dropdownlist" data-text-field="dictname"
                                            data-value-field="dictcode"
                                            data-bind="source:proClassSource,value:queryForm.proclass"
                                            style="width: 160px" />
                            </td>
                            <td>
                                    <label style="display:inline-block;width:70px">项目状态</label>
                                    <input style="width: :160px" data-role="dropdownlist" data-text-field="dictname"
                                            data-value-field="dictcode"
                                            data-bind="source:proStatueSource,value:queryForm.prostatue"
                                            style="width: 160px" />
                            </td>
    
                    </tr>
                    <tr>
                            <td>
                                    <label>项目编号:
                                            <input class="k-textbox" style="width: 120px;"
                                                    data-bind="value: queryForm.projcode" />
                                    </label>
                            </td>
                            <td>
                                    <label>项目名称:
                                            <input class="k-textbox" style="width: 120px;"
                                                    data-bind="value: queryForm.projname" />
                                    </label>
                            </td>
                            <td colspan="2">
                                    <span style="float:right">
                                            <button type="button" data-role="button" data-icon="refresh"
                                                    data-bind="click:onQuery">查询</button>
                                            <button type="button" style="margin-right:15px" data-role="button"
                                                    data-icon="excel" data-bind="click:onExport">导出</button>
                                            <button type="button" data-role="button"
                                                    data-bind="click:openTabWin">项目岗位需求、人员、付款信息、归档材料、供应商查看</button>
                                    </span>
                            </td>
                    </tr>
            </table>
    
    
    </form>
    <div class="clearfloat"></div>
    <div id="grid"></div>
    
    <div class="k-popup-edit-form" data-role="window" data-visible="false" data-modal='true' id="{
       {editFormId}}detail"
            style="width:1100px;height:400px;margin-top:5px">
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                    <label>
                            <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">项目编码:</label>
                            <input class="k-textbox" style="width: 15%;margin:5px;"
                                    data-bind="value: _currentItem2.projcode" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:70px">项目名称:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projname" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:70px">项目年度:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projyear" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:70px">项目分类:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.protypename" />
                    </label>
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                    <label>
                            <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">招标方式:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projZbTypeName" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:70px">用工单位:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.proorgname" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:70px">用工类型:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projYgClassName" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:70px">准入方式:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projZrTypeName" />
                    </label>
    
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
    
                    <label>
                            <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">管理部门:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projManageOrgName" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:70px">项目总额(元):</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projmoney" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:70px">定员人数:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projpersoncount" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:70px">外雇人数:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projPersonOutCount" />
                    </label>
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                    <label>
                            <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">供应商性质:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.proname" />
                    </label>
                    <label><label style="display:inline-block;width:95px">计划开始日期:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projPlanBeginDate" />
                    </label>
                    <label><label style="display:inline-block;width:95px">计划结束日期:</label>
                            <input class="k-textbox" style="width: 15%;margin:2px;"
                                    data-bind="value: _currentItem2.projPlanEndDate" />
                    </label>
    
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
    
                    <label>
                            <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">项目要求:</label>
                            <input class="k-textbox" style="width: 78%;height:70px;margin:2px;"
                                    data-bind="value:_currentItem2.projManageReqDesc" />
                    </label>
    
    
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
    
                    <label>
                            <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">项目意见:</label>
                            <input class="k-textbox" style="width: 78%;height:70px;margin:2px;"
                                    data-bind="value:_currentItem2.projManageOpinion" />
                    </label>
    
            </div>
    </div>
    
    <div class="k-popup-edit-form" data-role="window" data-visible="false" data-modal='true' id="{
       {editFormId}}tabView"
            style="width:900px;height:470px;margin-top:5px">
            <div data-role="tabstrip">
                    <ul>
                            <li class="k-state-active">
                                    项目岗位需求
                            </li>
                            <li>
                                    项目人员
                            </li>
                            <li>
                                    付款信息
                            </li>
                            <li>
                                    归档材料
                            </li>
                            <li>
                                    供应商
                            </li>
                    </ul>
                    <div>
                            <div class="clearfloat"></div>
                            <div data-role="grid" data-selectable="multiple,row" data-sortable="true" data-pageable="{
                            pageSizes: [20, 50, 100],
                            pageSize: 20,
                            }" data-columns="[
                             { field: 'id', title: '序号',width:50},
                            { field: 'projPostId', title: '项目岗位ID',width:50, hidden:true},
                            { field: 'projCode', title: '项目编号',width:50},
                            { field: 'postCode', title: '岗位编号',width:50},
                            { field: 'postName', title: '岗位名称',width:50},
                            { field: 'postPersonCount', title: '岗位人数',width:50},
                            { field: 'postReqBegindate', title: '岗位需求开始日期',width:50,format:'{0:yyyy-MM-dd HH:mm}'},
                            { field: 'postReqEnddate', title: '岗位需求结束日期',width:50,format:'{0:yyyy-MM-dd HH:mm}'},
                            { field: 'postReqDesc', title: '岗位需求描述',width:50},
                            { field: 'postRemark', title: '备注说明 ',width:50}                       
                            ]" data-bind="source:ppostSource,selected:_selectedItems3"
                                    style="height:{
       {height}}px; margin-top:10px;">
                            </div>
                    </div>
                    <div>
                            <div class="clearfloat"></div>
                            <div data-role="grid" data-resizable="true" data-selectable="multiple, row"
                                    data-scrollable="true" data-columns="[
                                            { 'field': 'id', 'title': '序号', 'width': 60 }, 
                                            { 'field': 'personCode', 'title': '人员编号', 'width': 100 }, 
                                            { 'field': 'personName', 'title': '姓名', 'width': 90 }, 
                                            { 'field': 'personSex', 'title': '性别', 'width': 90 }, 
                                            { 'field': 'personBirth', 'title': '出生日期', 'width': 90 },
                                            { 'field': 'personIdCode', 'title': '身份证号', 'width': 90 },
                                            { 'field': 'personPhone', 'title': '联系电话', 'width': 90 },
                                            { 'field': 'postName', 'title': '所属岗位', 'width': 90 }
                                            ]" data-bind="source: ppersonSource,
                                    selected:_selectedItems4" style="height:300px;margin-top:10px;text-align:center;">
                            </div>
                    </div>
                    <div>
                            <div class="clearfloat"></div>
                            <div data-role="grid" data-resizable="true" data-selectable="multiple, row"
                                    data-scrollable="true" data-columns="[
                                    { 'field': 'id', 'title': '序号', 'width': 60 }, 
                                            { 'field': 'payId', 'title': '付款申请单编号', 'width': 100 }, 
                                            { 'field': 'payDesc', 'title': '描述', 'width': 90 }, 
                                            { 'field': 'payMoney', 'title': '付款金额（元）', 'width': 90 }, 
                                            { 'field': 'supplierName', 'title': '供应商', 'width': 90 }, 
                                            { 'field': 'payTypeName', 'title': '付款方式', 'width': 90 },
                                            { 'field': 'payClassName', 'title': '付款类型', 'width': 90 },
                                            { 'field': 'pay_date', 'title': '付款时间', 'width': 90, format:'{0:yyyy-MM-dd HH:mm}' }
                                            ]" data-bind="source: ppayApplySource,
                                    selected:_selectedItems5" style="height:300px;margin-top:10px;text-align:center;">
                            </div>
                    </div>
                    <div>
                            <div class="clearfloat"></div>
                            <div data-role="grid" data-resizable="true" data-selectable="multiple, row" id='docgrid'
                                    data-scrollable="true" data-columns="[
                                    { 'field': 'id', 'title': '序号', 'width': 60 }, 
                                    { field: 'fileId', title: '下载', width: 90 ,
                                            template:'<U>下载</U>'},
                                            { 'field': 'docName', 'title': '材料名称', 'width': 100 }, 
                                            { 'field': 'docTypeName', 'title': '材料类型', 'width': 90 }, 
                                            { 'field': 'docClassName', 'title': '材料分类', 'width': 90 }, 
                                            { 'field': 'fileExtend', 'title': '文件格式', 'width': 90 }, 
                                            { 'field': 'DocRemark', 'title': '备注', 'width': 90 }
                                            ]" data-bind="source: pdocumnetSource,
                                    selected:_selectedItems7" style="height:300px;margin-top:10px;text-align:center;">
                            </div>
                    </div>
                    <div>
                            <div class="clearfloat"></div>
                            <div data-role="grid" data-resizable="true" data-selectable="multiple, row"
                                    data-scrollable="true" data-columns="[
                                    { 'field': 'id', 'title': '序号', 'width': 60 }, 
                                            { 'field': 'projSupplierCode', 'title': '供应商编号', 'width': 100 }, 
                                            { 'field': 'projSupplierName', 'title': '供应商名称', 'width': 90 }, 
                                            { 'field': 'projSupplierDate', 'title': '加入日期', 'width': 90 ,format:'{0:yyyy-MM-dd HH:mm}'}, 
                                            { 'field': 'projSupplierRemark', 'title': '备注说明', 'width': 90 }
                                            ]" data-bind="source: psupplierSource,
                                    selected:_selectedItems6" style="height:300px;margin-top:10px;text-align:center;">
                            </div>
                    </div>
            </div>
    </div>

module.ts

import uniqueId from 'lodash-es/uniqueId';
    import DataSourceFactory from '../../components/DataSourceFactory';
    import { supplier, supplierQueryForm } from './Supplier';
    import template from './SupplierView.hbs';
    import SupplierViewModule from './SupplierViewModule';
    import { detSupplier, detSuppQuerForm } from './DetailSup';
    import { ProjPostQueryForm, ProjPost, ProjPerson, projPayApply, projSupplier, projDocument } from './Proj';
    import { V4MAPPED } from 'dns';
    
    let grid: any;
    var check_res: any;
    export default class SupplierModule implements Module {
        setup(el: JQuery, params: object): void {
            const editFormId = uniqueId('editForm');
            const detailId = uniqueId();
            el.append(
                template({
                    height: el.height() - 95,
                    height2: el.height() * 0,
                    editFormId,
                    detailId
                })
            );
    
            const gridheight: any = el.height() - 95;
            const queryForm = new supplierQueryForm();
            const dSuppQuerForm = new detSuppQuerForm();
            const ProjPQueryForm = new ProjPostQueryForm();
    
            const url = '/api/table/projmain/seljmain'; //上传下载路径
            const durl = '/api/table/projmain/selDetProjMain'; //详情
            const dataSource = DataSourceFactory.createDefault(url, supplier, queryForm);
            const detailSource = DataSourceFactory.createNoRoot(durl, detSupplier, dSuppQuerForm);
            //tab table source
            const qwxqUrl = '/api/table/projmain/selProjPost';
            const ppersonUrl = '/api/table/projmain/selProjPerson';
            const ppayUrl = '/api/table/projmain/selProjPay';
            const psupplierUrl = '/api/table/projmain/selProjSupplier';
            const pdocumentUrl = '/api/table/projmain/selProjDocument';
            const ppostSource = DataSourceFactory.createDefault(qwxqUrl, ProjPost, dSuppQuerForm);
            const ppersonSource = DataSourceFactory.createDefault(ppersonUrl, ProjPerson, dSuppQuerForm);
            const ppayApplySource = DataSourceFactory.createDefault(ppayUrl, projPayApply, dSuppQuerForm);
            const psupplierSource = DataSourceFactory.createDefault(psupplierUrl, projSupplier, dSuppQuerForm);
            const pdocumnetSource = DataSourceFactory.createDefault(pdocumentUrl, projDocument, dSuppQuerForm);
    
            const yearSource = DataSourceFactory.createBaseFrontNoRoot('/api/table/combolist/proyear');
            const endUserSource = DataSourceFactory.createBaseFrontNoRoot(
                '/api/table/combolist/useorg'
            );
            const proClassSource = DataSourceFactory.createBaseFrontNoRoot(
                '/api/table/combolist/proclass'
            );
            const proStatueSource = DataSourceFactory.createBaseFrontNoRoot(
                '/api/table/combolist/porstatue'
            );
            const exportUrl = '/api/table/projmain/excel';
    
            grid = $('#grid').kendoGrid({
                dataSource: dataSource,
                selectable: "multiple",
                height: gridheight,
                scrollable: true,
                filterable: true,
                pageable: {
                    pageSizes: [20, 50, 100],
                    pageSize: 20,
                    refresh: true
                },
                columns: [
                    { field: 'id', 'title': '序号', 'width': 50 },
                    { field: 'projcode', title: '项目编号', width: 150, template: '<U>#: projcode # </U>' },
                    { field: 'projname', title: '项目名称', width: 150 },
                    { field: 'projyear', title: '年度', width: 80 },
                    { field: 'protypecode', title: '项目类别', width: 100, hidden: true },
                    { field: 'protypename', title: '项目类别', width: 100 },
                    { field: 'projworkcontent', title: '作业内容', width: 320 },
                    { field: 'projpersoncount', title: '定员人数', width: 100 },
                    { field: 'projmoney', title: '项目总数', width: 100 },
                    { field: 'proorgcode', title: '用工单位', width: 100, hidden: true },
                    { field: 'proorgname', title: '用工单位', width: 100 },
                    { field: 'prostatuecode', title: '项目状态', width: 100, hidden: true },
                    { field: 'prostatuename', title: '项目状态', width: 100 }
                ]
    
            });
            // // 单击行事件
            var clickE = grid.on('click', '.k-grid-content tr', function (this: JQuery, arg: any) {
                // 获取当前选择行数据
                var gridid = grid.data("kendoGrid");
                var rownum = $(this).closest("tr");
                var rowIdnum = $("tr", gridid.tbody).index(rownum);
                var colIdnum = arg.toElement.cellIndex;
                var rowdataget = grid.data("kendoGrid").dataItem(rownum);
                var projcode = rowdataget.get("projcode");
    
                if (colIdnum == undefined) {
                    colIdnum = arg.toElement.parentElement.cellIndex;
                }
                if (projcode != null && colIdnum == 1) {
                    selDetail(detailSource, projcode, vm);
                }
                else {
                    dSuppQuerForm.set("projcode", projcode);
                    getSelect(detailSource, projcode, vm);
                }
            });
    
            const vm = new SupplierViewModule(
                supplier,
                dataSource,
                queryForm,
                editFormId,
                detailId,
                //子表格
                detSupplier,
                detailSource,
                dSuppQuerForm,
                //project job requirements
                ProjPost,
                ppostSource,
                ProjPQueryForm,
                //project personnal
                ProjPerson,
                ppersonSource,
                //payment details
                projPayApply,
                ppayApplySource,
                //archive material
                projSupplier,
                psupplierSource,
                //supplier
                projDocument,
                pdocumnetSource,
    
                yearSource,
                endUserSource,
                proClassSource,
                proStatueSource,
                exportUrl,
                grid
            );
            $('#docgrid').on('click', '.k-grid-content tr', function (this: JQuery, arg: any) {
                var colIdnum = arg.toElement.cellIndex;
                if (colIdnum == undefined) {
                    colIdnum = arg.toElement.parentElement.cellIndex;
                }
                vm.download(colIdnum);
            })
            // el.on('click', 'button.edit-item', vm.download.bind(vm));
            kendo.bind(el, vm);
        }
    
    }
    
    function selDetail(detailSource: any, projcode: any, vm: SupplierViewModule) {
        vm.onEdit(getData(detailSource, projcode, vm));
        return check_res;
    }
    function getSelect(detailSource: any, projcode: any, vm: SupplierViewModule) {
        vm.setSelect(getData(detailSource, projcode, vm));
        return check_res;
    }
    function getData(detailSource: any, projcode: any, vm: SupplierViewModule) {
        $.ajax({
            async: false,
            type: 'post',
            url: '/api/table/projmain/selDetProjMain',
            data: JSON.stringify({
                projcode,
            }),
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
        }).done((e) => {
            check_res = e;
            if (e != undefined) {
                detSupplier.bind(e);
            }
        });
        return check_res;
    }

viewModule.ts

import CrudViewModel from '../../components/CrudViewModel';
    
    let e: kendo.data.Model;
    export default class SupplierViewModule extends CrudViewModel {
        protected _selectedItems2: kendo.data.Model[] = [];
        protected _currentItem2: kendo.data.Model;
        public currentI: any;
        protected _selectedItems3: kendo.data.Model[] = [];  //Projpost
        protected _currentItem3: kendo.data.Model;
        protected _selectedItems4: kendo.data.Model[] = [];  //ProjPerson
        protected _currentItem4: kendo.data.Model;
        protected _selectedItems5: kendo.data.Model[] = [];  //ProjPay
        protected _currentItem5: kendo.data.Model;
        protected _selectedItems6: kendo.data.Model[] = [];  //Projsupplier
        protected _currentItem6: kendo.data.Model;
        protected _selectedItems7: kendo.data.Model[] = [];  //Projdocument
        protected _currentItem7: kendo.data.Model;
        protected $viewAddWin: JQuery;
        protected detail: string;
        constructor(
            protected c: { new(): kendo.data.Model },
            protected dataSource: kendo.data.DataSource,
            protected queryForm: kendo.data.ObservableObject,
            editFormId: string,
            detailId: string,
            //子表格
            protected d: { new(): kendo.data.Model },
            protected detailSource: kendo.data.DataSource,
            protected dSuppQuerForm: kendo.data.ObservableObject,
            //tab table gwxq
            protected j: { new(): kendo.data.Model },
            protected ppostSource: kendo.data.DataSource,
            protected ProjPQueryForm: kendo.data.ObservableObject,
            //tab table projperson
            protected f: { new(): kendo.data.Model },
            protected ppersonSource: kendo.data.DataSource,
            //tab table payapply
            protected g: { new(): kendo.data.Model },
            protected ppayApplySource: kendo.data.DataSource,
            //tab table archive material
            protected h: { new(): kendo.data.Model },
            protected psupplierSource: kendo.data.DataSource,
            //tab table supplier
            protected i: { new(): kendo.data.Model },
            protected pdocumnetSource: kendo.data.DataSource,
    
            protected yearSource: kendo.data.DataSource,
            protected endUserSource: kendo.data.DataSource,
            protected proClassSource: kendo.data.DataSource,
            protected proStatueSource: kendo.data.DataSource,
            protected exportUrl?: string,
            protected grid: any = $('#grid')
        ) {
            super(c, dataSource, queryForm, editFormId);
            this._currentItem2 = new d();
            this._currentItem3 = new j();
            this._currentItem4 = new f();
            this._currentItem5 = new g();
            this._currentItem6 = new h();
            this._currentItem7 = new i();
            this.$viewAddWin = $(`#${editFormId}detail`);
            this.detail = detailId;
        }
    
    
        public setSelect(e: kendo.data.Model) {
            this.selectedItems[0] = e;
            this.currentItem3 = this.selectedItems[0];
        }
        public onEdit(e: kendo.data.Model) {
            this.currentItem2 = e;
            $(`#${this.editFormId}detail`)
                .data('kendoWindow')
                .title('数据字典新增')
                .open()
                .center();
        }
        public openTabWin(): void {
            // this.gwxqSource.read(this._selectedItems2[0].toJSON());
            // this.propost.read(this._selectedItems[0].toJSON());
            // this.prodoc.read(this._selectedItems[0].toJSON());
            if (this.selectedItems[0] == undefined) {
                alert("请选择一条数据进行查看");
                return;
            } else {
                // this.currentItem3 = this.selectedItems[0];
                // this.currentItem4 = this.selectedItems[0];
                this.ppostSource.read();
                this.ppersonSource.read();
                this.ppayApplySource.read();
                this.psupplierSource.read();
                this.pdocumnetSource.read();
                $(`#${this.editFormId}tabView`)
                    .data('kendoWindow')
                    .title('详情查看信息')
                    .open()
                    .center();
            }
        }
    
        public download(colIdnum: any) {
            if (this.selectedItems7.length == 1 && colIdnum == 1) {
                console.log(this.selectedItems7[0].get("fileId"));
                const promise = kendo.confirm('确认要下载么');
                promise.done(() => {
    
    
                });
            }
    
        }
    
        get selectedItems2(): kendo.data.Model[] {
            return this.get('_selectedItems2');
        }
    
        set selectedItems2(selected: kendo.data.Model[]) {
            this.set('_selectedItems2', selected);
        }
    
        get currentItem2(): kendo.data.Model {
            return this.get('_currentItem2');
        }
    
        set currentItem2(selected: kendo.data.Model) {
            this.set('_currentItem2', selected);
        }
    
        get selectedItems3(): kendo.data.Model[] {
            return this.get('_selectedItems3');
        }
    
        set selectedItems3(selected: kendo.data.Model[]) {
            this.set('_selectedItems3', selected);
        }
    
        get currentItem3(): kendo.data.Model {
            return this.get('_currentItem3');
        }
    
        set currentItem3(selected: kendo.data.Model) {
            this.set('_currentItem3', selected);
        }
    
        get selectedItems4(): kendo.data.Model[] {
            return this.get('_selectedItems4');
        }
    
        set selectedItems4(selected: kendo.data.Model[]) {
            this.set('_selectedItems4', selected);
        }
    
        get currentItem4(): kendo.data.Model {
            return this.get('_currentItem4');
        }
    
        set currentItem4(selected: kendo.data.Model) {
            this.set('_currentItem4', selected);
        }
    
        get selectedItems5(): kendo.data.Model[] {
            return this.get('_selectedItems5');
        }
    
        set selectedItems5(selected: kendo.data.Model[]) {
            this.set('_selectedItems5', selected);
        }
    
        get currentItem5(): kendo.data.Model {
            return this.get('_currentItem5');
        }
    
        set currentItem5(selected: kendo.data.Model) {
            this.set('_currentItem5', selected);
        }
    
        get selectedItems6(): kendo.data.Model[] {
            return this.get('_selectedItems6');
        }
    
        set selectedItems6(selected: kendo.data.Model[]) {
            this.set('_selectedItems6', selected);
        }
    
        get currentItem6(): kendo.data.Model {
            return this.get('_currentItem6');
        }
    
        set currentItem6(selected: kendo.data.Model) {
            this.set('_currentItem6', selected);
        }
    
        get selectedItems7(): kendo.data.Model[] {
            return this.get('_selectedItems7');
        }
    
        set selectedItems7(selected: kendo.data.Model[]) {
            this.set('_selectedItems7', selected);
           // if (this.selectedItems7 != undefined) {
           //    var colIdnum: any;
           //    $('#docgrid').on('click', '.k-grid-content tr', function (this: JQuery, arg: any) {
           //        colIdnum = arg.toElement.cellIndex;
           //       if (colIdnum == undefined) {
           //            colIdnum = arg.toElement.parentElement.cellIndex;
           //        }
           //    })
           //    this.download(colIdnum);
           //}
        }
    
        get currentItem7(): kendo.data.Model {
            return this.get('_currentItem7');
        }
    
        set currentItem7(selected: kendo.data.Model) {
            this.set('_currentItem7', selected);
        }
        public isModifiabled(): boolean {
            return this.selectedItems.length === 1;
        }
    
    }

显示效果：

![20191012150658831.png][]

点击可弹出窗口：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70][]

对应项目资源下载：

[https://download.csdn.net/download/woyizhizaizhaoni/11856126][https_download.csdn.net_download_woyizhizaizhaoni_11856126]

[20191012150658831.png]: /images/20230601/ca4ec1797ff04825a2cfc02be622e1b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70]: /images/20230601/33009564cb3a4ffa979dbd02e2a3409c.png
[https_download.csdn.net_download_woyizhizaizhaoni_11856126]: https://download.csdn.net/download/woyizhizaizhaoni/11856126