handlebars+kendo-ui grid单元格点击事件（二）

我会带着你远行 2023-06-05 14:55 22阅读 0赞

关于点击事件后弹出窗口，显示返回绑定数据：

//.hbs page
    <form>
            <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" />
            <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" />
            <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" />
            <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" />
            <label>项目编号:
                    <input class="k-textbox" style="width: 15%;" data-bind="value: queryForm.procode" />
            </label>
            <label>项目名称:
                    <input class="k-textbox" style="width: 15%;" data-bind="value: queryForm.proname" />
            </label>
            <span style="float:right">
                    <button type="button" data-role="button" data-icon="refresh" data-bind="click:onQuery">查询</button>
                    {
       {!-- <button type="button" data-role="button" data-icon="plus" data-bind="click:onAdd">新增</button>
                    <button type="button" data-role="button" data-icon="edit" data-bind="click:onModify,enabled:isModifiabled">修改</button>
                    <button type="button" data-role="button" data-icon="delete" data-bind="click:onRemove,enabled:isRemoveable">删除</button>
                    <button type="button" data-role="button" data-icon="upload" data-bind="click:onImport">导入</button> --}}
                    <button type="button" style="margin-right:15px" data-role="button" data-icon="excel"
                            data-bind="click:onExport">导出</button>
            </span>
    </form>
    <div class="clearfloat"></div>
    <div id="grid"></div>
    {
       {!-- <div data-role="grid" data-resizable="true" data-selectable="multiple, row" data-scrollable="true" data-pageable="{
                pageSizes: [20, 50, 100],
                pageSize: 20,
            }" data-columns="[
                       { 'field': 'id', 'title': '序号', 'width': 100},
                        { template: kendo.template($('#tmplButtonPopup{
       {detailId}}').html()), title: '操作', width:250} ,
                        { 'field': 'projcode', 'title': '项目编号', 'width': 180  }, 
                        { 'field': 'projname', 'title': '项目名称', 'width': 180 }, 
                        { 'field': 'projyear', 'title': '年度', 'width': 80 },
                        { 'field': 'protypename', 'title': '项目类别', 'width': 100 },
                        { 'field': 'projworkcontent', 'title': '作业内容', 'width': 320 },
                        { 'field': 'projpersoncount', 'title': '定员人数', 'width': 100 },
                        { 'field': 'projmoney', 'title': '项目总数', 'width': 100 },
                        { 'field': 'proorgname', 'title': '用工单位', 'width': 100 },
                        { 'field': 'prostatuename','title': '项目状态', 'width': 100 }
                        ]" data-bind="source: dataSource,selected:_selectedItems"
            style="height:{
       {height}}px;margin-top:10px;text-align:center;">
    </div> --}}
    {
       {!-- <a href="javascript:check( \''+{
       {value}} '\')">变更</a> --}}
    {
       {!-- { 'field': 'protypecode', 'title': '项目类别', 'width': 100 },  --}}
    {
       {!-- { field: 'proorgcode', 'title': '用工单位', 'width': 100 },  --}}
    {
       {!-- { field: 'prostatuecode', 'title': '项目状态', 'width': 100 },  --}}
    {
       {!-- { width:120,title:'项目详情',command: [{text: '详细信息', click(){ {
       {permalink}} } }]},
    
                         #if(data.uploaded=='是'){#
                <button class="k-link btns download-attachment" >下载附件</button>
            #}  #
            #if(data.approvestatus=='100' || data.approvestatus=='400'){#
                <button class="k-link btns edit-item"  >编辑</button>
                <button class="k-link btns remove-list-item" >删除</button>
            #}#--}}
    
    
    
    
    <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>
    {
       {!-- 
    <script id="tmplButtonPopup{
       {detailId}}" type="text/x-kendo-template">
          <button class="edit-item" >详情</button>
    </script> --}}
    
    {
       {!-- #if(data.procode!=""){#
          <button class="edit-item" >详情</button>
        #} # --}}

//SupplierViewModule page
    import CrudViewModel from '../../components/CrudViewModel';
    
    export default class SupplierViewModule extends CrudViewModel {
        protected _selectedItems2: kendo.data.Model[] = [];
        protected _currentItem2: kendo.data.Model;
        public currentI: any;
        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,
            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.$viewAddWin = $(`#${editFormId}detail`);
            this.permalink();
            this.detail = detailId;
        }
        // public onQuery(){
        //     super.onQuery();
        // }
    
        // 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);
        }
        // public onQuery() {
        //     if (this._selectedItems.length != 0) {
        //         this.detail = this._selectedItems[0].get('projcode');
        //     }
        // }
        public permalink() {
    
            if (this._selectedItems.length != 0) {
                this._currentItem.set('projcode', this._selectedItems[0].get('projcode'));
                alert(this._currentItem.get('projcode'));
                this.detailSource.read();
                this.$viewAddWin
                    .data('kendoWindow')
                    .title('数据字典新增')
                    .open()
                    .center();
            }
        }
        public onEdit(e: kendo.data.Model) {
            this.currentItem2 = e;
            $(`#${this.editFormId}detail`)
                // $(`#${this.editFormId}Upload`)
                .data('kendoWindow')
                .title('数据字典新增')
                .open()
                .center();
        }
    }

//SupplierModule  page
    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 { V4MAPPED } from 'dns';
    let datacode: any;
    let grid: any;
    let gridget: any; //grid ref
    let cell: any; // selected td
    let row: any; //selected tr
    let row_uid: any; //uid of selected row
    let cell_index: any; //cell index 0 based
    let row_index: any; //row index 0 based
    let row_data: 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 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);
            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': 100 },
                    { field: 'projcode', title: '项目编号', width: 100, template: '<U>#: projcode # </U>' },
                    // function(){
                    //        return "<a href=''><strong>#: projcode # </strong></a>";
                    // }}, //,template:"<strong>#: projcode # </strong>"
                    { field: 'projname', title: '项目名称', width: 100 },
                    { 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 }
                ]
                // ,change:function(e){
                //     gridget = e.sender; //grid ref
                //     cell = gridget.select(); // selected td
                //     row = cell.closest('tr'); //selected tr
                //     row_uid = row.attr('data-uid'); //uid of selected row
                //     cell_index =cell.index(); //cell index 0 based
                //     row_index =row.index(); //row index 0 based
                //     row_data =gridget.dataItem(row).toJSON(); //selected row data
                // }
            });
            // // 单击行事件
            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");
                // datacode = row_data;
    
                if (colIdnum == undefined) {
                    colIdnum = arg.toElement.parentElement.cellIndex;
                }
                if (projcode != null && colIdnum == 1) {
                    selDetail(detailSource, projcode, vm);
                    // $(`#${editFormId}detail`)
                    // .data('kendoWindow')
                    // .title('数据字典新增')
                    // .open()
                    // .center();
                }
                else {
    
                }
            });
    
            // // 双击行事件
            // grid.on('dblclick', '.k-grid-content tr', function () {
            //     // 获取当前选择行数据
            //     var row = grid.data("kendoGrid").select();
            //     var aa = grid.data("kendoGrid").editRow;
            //     var data = grid.data("kendoGrid").dataItem(row);
            //     alert(row + "/" + aa + "" + data);
            // });
            const vm = new SupplierViewModule(
                supplier,
                dataSource,
                queryForm,
                editFormId,
                detailId,
                //子表格
                detSupplier,
                detailSource,
                dSuppQuerForm,
                yearSource,
                endUserSource,
                proClassSource,
                proStatueSource,
                exportUrl,
                grid
            );
            el.on('click', 'button.edit-item', vm.permalink.bind(vm));
            // el.clone(check_res,vm.currentI);
    
            kendo.bind(el, vm);
        }
    }
    
    function selDetail(detailSource: any, projcode: any, vm: SupplierViewModule) {
        // let e: kendo.ui.UploadSuccessEvent;
        $.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) {
                // detSuppQuerForm.bind(e);
                detSupplier.bind(e);
            }
            // detailSource.read();
        });
        // vm.currentItem2.bind("selected",check_res);
        // vm.currentItem2.bind("_currentItem2",check_res);
        // vm.currentItem2.bind("projname",check_res.projname);
        // vm.currentItem2.bind("projyear",check_res.projyear);
        vm.onEdit(check_res);
        // vm.permalink();
        return check_res;
    }

此处是实体类页面不添加了

显示样式如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70][]

点击如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1][]

由于项目中模板，返回值一直出不来，古董了好久才出来啊真是。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70]: /images/20230601/164988305f1246558df0fcdc6c94c375.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1]: /images/20230601/2f746be24ddc4d5e89e0b48545be8c09.png