handlebars+kendo-ui grid单元格点击事件(一）

亦凉 2023-08-17 16:47 102阅读 0赞

<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:800px;height:500px;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:100px">项目编码:</label>
                            <input class="k-textbox" readonly="readonly" style="width: 17%;" data-bind="value:_currentItem.proj_code" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">项目名称:</label>
                            <input class="k-textbox" style="width: 17%;" data-bind="value:_currentItem.proj_name" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">项目年度:</label>
                            <input data-role="combobox" data-placeholder="请选择" data-readonly="true" data-readonly= "true" data-text-field="DICT_NAME" data-value-field="DICT_CODE"
                                    style="width: 17%;" data-bind="source: xmnd,value: _currentItem.proj_year" />
                    </label>
                    
            </div>
             <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                    
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">项目分类:</label>
                            <input data-role="combobox" data-placeholder="请选择" data-text-field="DICT_NAME" data-readonly= "true" data-value-field="DICT_CODE" data-filter="startswith"
                                    style="width: 17%;" data-bind="source: xmlb,value: _currentItem.proj_type_code">
                    </label>
                   <label>
                            <label style="display:inline-block;text-align:right;width:100px">招标方式:</label>
                            <input data-role="combobox" data-placeholder="请选择" data-text-field="DICT_NAME" data-readonly= "true" data-value-field="DICT_CODE" data-filter="startswith"
                                    style="width: 17%;" data-bind="source: zblx,value: _currentItem.proj_zb_type_code">
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">供应商性质:</label>
                            <input data-role="combobox" data-placeholder="请选择" data-text-field="DICT_NAME" data-readonly= "true" data-value-field="DICT_CODE" data-filter="startswith"
                                    style="width: 17%;" data-bind="source: gysxz,value: _currentItem.gysxz">
                    </label>
                    
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                    
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">用工单位:</label>
                            <input data-role="combobox" data-placeholder="请选择" data-text-field="ORG_NAME" data-readonly= "true" data-value-field="ORG_CODE" data-filter="startswith"
                                    style="width: 17%;" data-bind="source: ygdw,value: _currentItem.proj_org_code">
                    </label>
                   <label>
                            <label style="display:inline-block;text-align:right;width:100px">用工类型:</label>
                            <input data-role="combobox" data-placeholder="请选择" data-text-field="DICT_NAME" data-readonly= "true" data-value-field="DICT_CODE" data-filter="startswith"
                                    style="width: 17%;" data-bind="source: yglx,value: _currentItem.proj_yg_class_code">
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">准入方式:</label>
                            <input data-role="combobox" data-placeholder="请选择" data-text-field="DICT_NAME" data-readonly= "true" data-value-field="DICT_CODE" data-filter="startswith"
                                    style="width: 17%;" data-bind="source: zrfs,value: _currentItem.proj_zr_type_code">
                    </label>
                    
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                    
                   <label>
                            <label style="display:inline-block;text-align:right;width:100px">管理部门:</label>
                            <input data-role="combobox" data-placeholder="请选择" data-text-field="ORG_NAME" data-readonly= "true" data-value-field="ORG_CODE" data-filter="startswith"
                                    style="width: 17%;" data-bind="source: glbm,value: _currentItem.proj_manage_org_code">
                    </label>
                     <label ><label style="display:inline-block;width:100px">计划开始日期:</label>
                            <input data-role="datepicker" data-format="yyyy-MM-dd" style="width: 17%;" data-bind="value: _currentItem.proj_plan_begin_date" />
                    </label>
                    <label><label style="display:inline-block;width:100px">计划结束日期:</label>
                            <input data-role="datepicker" data-format="yyyy-MM-dd" style="width: 17%;" data-bind="value: _currentItem.proj_plan_end_date" />
                    </label>
                    
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                    
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">项目总额(元):</label>
                            <input data-role="numerictextbox" style="width: 17%;" data-bind="value:_currentItem.proj_money" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">定员人数:</label>
                            <input data-role="numerictextbox" data-format="#" style="width: 17%;" data-bind="value:_currentItem.proj_person_count" />
                    </label>
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">外雇人数:</label>
                            <input data-role="numerictextbox" data-format="#" style="width: 17%;" data-bind="value:_currentItem.proj_person_out_count" />
                    </label>
                    
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                    
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">项目要求:</label>
                            <input class="k-textbox" style="width: 78%;height:70px;" data-bind="value:_currentItem.proj_manage_req_desc" />
                    </label>
                    
                    
            </div>
            <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                    
                    <label>
                            <label style="display:inline-block;text-align:right;width:100px">项目意见:</label>
                            <input class="k-textbox" style="width: 78%;height:70px;" data-bind="value:_currentItem.proj_manage_opinion" />
                    </label>
                   
            </div>
    </div>
    
    <script id="tmplButtonPopup{
       {detailId}}" type="text/x-kendo-template">
            <button class="edit-item" >详情</button>
    </script>

\--module

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';
    let datacode: any;
    let grid: 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 },
            //         {
            //             width: 120,
            //             title: '项目编码详情',
            //             // field: 'projcode',
            //             command: [
            //                 {
            //                     name: '详细信息',
            //                     //   visible: function(){return '<tr data-uid="#= uid #"><strong>#: projcode #</strong></td>'},
            //                     click(this: JQuery, arg: any) {
            //                         // var gridid = grid.data("kendoGrid");
            //                         // var row = $(this).closest("tr");
            //                         // var rowIdx = $("tr", gridid.tbody).index(row);
            //                         // var colIdx = $("td", row).index(this);
            //                         // var data = grid.data("kendoGrid").dataItem(row).get("projcode");
            //                         clickgetElement();
            //                         if (datacode != undefined) {
            //                             dSuppQuerForm.set("projcode", datacode);
            //                             alert(datacode + "/" + dSuppQuerForm.get("projcode"));
            //                             const projcode:any=datacode;
            //                             selDetail(detailSource,projcode);
            //                             // detailSource.read();
            //                             $(`#${editFormId}detail`)
            //                                 .data('kendoWindow')
            //                                 .title('数据字典新增')
            //                                 .open()
            //                                 .center();
            //                         }
            //                     }
    
            //                 }
            //             ]
            //         },
            //         { field: 'projcode', title: '项目编号', width: 100 },
            //        { field: 'projcode', title: '项目编号', width: 100 ,template:'<a> 
                       <strong>#: projcode # </strong></a>'},
                    // 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 }
    
            //     ]
            // });
            // // 单击行事件
            // 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");  //获取选中行的对应值
                // alert(rowIdx + '-' + colIdx+ '-' +data);
            //   datacode = row_data;
    
            //   if(projcode!=null && cell_index==2){
            //       selDetail(detailSource,projcode);
            //   }
            //   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));
            kendo.bind(el, vm);
        }
    }
    function clickgetElement() {
        grid.on('click', '.k-grid-content tr', function(this: JQuery, arg: any) {
            // 获取当前选择行数据
            var gridid = grid.data('kendoGrid');
            var row = $(this).closest('tr');
            var rowIdx = $('tr', gridid.tbody).index(row);
            var colIdx = $('td', row).index(this);
            var data = grid
                .data('kendoGrid')
                .dataItem(row)
                .get('projcode');
            // alert(rowIdx + '-' + colIdx+ '-' +data);
            datacode = data;
        });
    }
    function selDetail(detailSource: any, projcode: any) {
        $.ajax({
            type: 'post',
            url: '/api/table/projmain/selDetProjMain',
            data: JSON.stringify({
                projcode,
            }),
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
        }).done(() => {
            // detailSource.read();
        });
    }

\--viewModule

import CrudViewModel from '../../components/CrudViewModel';
    
    export default class SupplierViewModule extends CrudViewModel {
        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.$viewAddWin = $(`#${editFormId}detail`);
            this.permalink();
            this.detail = detailId;
        }
        // public onQuery(){
        //     super.onQuery();
        // }
        public onQuery() {
            if (this.selectedItems.length != 0) {
                this.detail = this._selectedItems[0].get('projcode');
            }
        }
        public permalink() {
            alert('aaaaa');
            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() {}
    }
    // class ink extends SupplierViewModule{
    //     public tt=this.permalink();
    // }