AngularJS行编辑 + 下拉框 + 时间选择器 实例

1.HTML

<div class="ui-layout-center" ng-controller="ecPurchaseMaterialListCtrl">
    <div class="container-div" ht-data-table="ecPurchaseMaterialGridOptions">
        <div class="row">
            <div class="col-sm-12">
                <div kendo-grid="ecPurchaseMaterialGrid" options="ecPurchaseMaterialGridOptions"></div>
            </div>
        </div>
    </div>
</div>

<script id="purchaseMaterialToolBar" type="text/x-kendo-template">
    <div class="toolbar">
    	<!--新增-->
        <a href="\\#" class="k-button" title='{{ "common.add" | translate }}' ng-click="addPurchaseMaterial()"><span class="k-icon k-i-add"></span>{{ "common.add" | translate }}</a>
        <!--删除-->
        <a href="\\#" class="k-button" title='{{ "common.delete" | translate }}' ng-click="deletePurchaseMaterial()"><span class="k-icon k-i-delete"></span>{{ "common.delete" | translate }}</a>
        <!--保存-->
        <a href="\\#" class="k-button" title='{{ "common.save" | translate }}' ng-click="savePurchaseMaterial()"><span class="k-icon k-i-save"></span>{{ "common.save" | translate }}</a>
        <!--刷新-->
        <a href="\\#" class="k-button" title='{{ "common.refresh" | translate }}' ng-click="refreshPurchaseMaterialGrid()"><span class="k-icon k-i-reload"></span>{{ "common.refresh" | translate }}</a>
    </div>
</script>

2.JS

function ecPurchaseMaterialListCtrl($scope, baseService, dialogService, $filter, gridOptionsService, $sessionStorage, $window, $stateParams, $rootScope, projectTreeService) {
    // 请求项目树
    $rootScope.$broadcast('system:mainTree:request', 'project');

    // 新增模板
    $scope.addPurchaseMaterial = function () {
        let newTemplate = {
            name: "",    // 名称
            unit: "",   // 计量单位 数据字典（下拉框）
            arrivalDate: "",  // 要求到货日期（时间选择）
            ecContractId: $scope.$parent.keyValue,//父子表关联（无关项）
        };
        $scope.ecPurchaseMaterialGrid.dataSource.add(newTemplate);
    };

    // 删除选中的模板
    $scope.deletePurchaseMaterial = function () {
        const selectedRows = $scope.ecPurchaseMaterialGrid.selectedKeyNames();
        const ids = selectedRows.join(',');
        console.log(ids);
        baseService.remove("${portal}/contract/expenditureContract/ecPurchaseMaterial/del", ids).then(function (result) {
            if (result.state) {
                $scope.refreshPurchaseMaterialGrid();
            } else {
                dialogService.error(result.message);
            }
        });
    }

    // 保存模板
    $scope.savePurchaseMaterial = function () {
        $scope.ecPurchaseMaterialGrid.saveChanges();
    }

    // 刷新模板表格
    $scope.refreshPurchaseMaterialGrid = function () {
        $scope.ecPurchaseMaterialGrid._selectedIds = {}
        $scope.ecPurchaseMaterialGrid.clearSelection();
        $scope.ecPurchaseMaterialGridOptions.queryPage();
    }

    // 列表配置项
    $scope.ecPurchaseMaterialGridOptions = {
        dataSource: {
            transport: {
                read:  {
                    url: getContext()['portal']+'/contract/expenditureContract/ecPurchaseMaterial/list',
                },
                update: {
                    url: getContext()['portal'] + "/contract/expenditureContract/ecPurchaseMaterial/batchSave"
                },
                create: {
                    url: getContext()['portal'] + "/contract/expenditureContract/ecPurchaseMaterial/batchSave"
                },
                destroy: {
                    url: getContext()['portal'] + "/contract/expenditureContract/ecPurchaseMaterial/del"
                }
            },
            batch: true,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        name: {type: "string", editable: true, validation: {required: true}},
                        unit: {type: "string", editable: true, validation: {required: true}},   // 计量单位 数据字典
                        arrivalDate: {editable: true, validation: {required: true}},  // 要求到货日期
                    }
                }
            },
            sync:function(){
                $scope.ecPurchaseMaterialGridOptions.queryPage();
            }
        },
        height:$window.innerHeight - 210,
        removeKey: 'id',
        initParams: [
            {
                "property": "ecContractId",//父子表关联
                "value": $scope.$parent.keyValue,  // 主表主键
                "operation": "EQUAL",
                "group": "main",
                "relation": "AND"
            }
        ],
        columns: [
            {
                selectable: true,
                locked: true,
                lockable: false,
                width: 50
            },
            {
                field: 'name',
                title: $filter('translate')('ecPurchaseMaterial.name'),
                width: 160,
                headerAttributes: {style: "text-align: center;"},
                attributes:{style:"text-align: center;white-space:nowrap;text-overflow:ellipsis;"}
            },
          
            {
                field: 'unit',
                title: $filter('translate')('ecPurchaseMaterial.unit'),
                width: 160,
                values: getMeasurementTypeDictDesc(),
                headerAttributes: {style: "text-align: center;"},
                attributes:{style:"text-align: center;white-space:nowrap;text-overflow:ellipsis;"}
            },
            {
                field: 'arrivalDate',
                title: $filter('translate')('ecPurchaseMaterial.arrivalDate'),
                width: 160,
                //format: "{0:yyyy-MM-dd}",
                headerAttributes: {style: "text-align: center;"},
                attributes:{style:"text-align: center;white-space:nowrap;text-overflow:ellipsis;"},
                editor: dateEditor
            },
        ],
        editable: true,
        change: function (arg) {
            //const rows = this.select();
            //const data = this.dataItem(rows[0]);
            //$scope.currentSelectedTemplate = data;
        },
        toolbar: kendo.template($("#purchaseMaterialToolBar").html()),
    };

    gridOptionsService.getDefaultOptions($scope, "ecPurchaseMaterialGridOptions", "ecPurchaseMaterialGrid");

    // 日期选择器
    function dateEditor(container, options) {
        $('<input type="text" required value="' + options.model[options.field] + '"/>')
            .appendTo(container)
            .kendoDatePicker({
                format: "yyyy-MM-dd",
                dateInput: true,
                change: function () {
                    const value = this.value().format("yyyy-MM-dd");
                    options.model.set(options.field, value);
                }
            });
    }

	//下拉框数据字典
	function getMeasurementTypeDictDesc(){
			var dictArray=[];
			   dictArray.push({text:'米',value:'米'});
			   dictArray.push({text:'延米',value:'延米'});
			   dictArray.push({text:'千米',value:'千米'});
			   dictArray.push({text:'平方米',value:'平方米'});
			   dictArray.push({text:'米/天',value:'米/天'});
			   dictArray.push({text:'工时',value:'工时'});
			   dictArray.push({text:'工日',value:'工日'});
			   dictArray.push({text:'台时',value:'台时'});
			   dictArray.push({text:'台班',value:'台班'});
			   dictArray.push({text:'月',value:'月'});
			   dictArray.push({text:'口',value:'口'});
			   dictArray.push({text:'个',value:'个'});
			   dictArray.push({text:'吨',value:'吨'});
			   dictArray.push({text:'座',value:'座'});
			   dictArray.push({text:'平台',value:'平台'});
			   dictArray.push({text:'项',value:'项'});
	  		return  dictArray;
	  }
}
angular.module('expenditureContract.purchase', [])
    .controller('ecPurchasePaymentNodeListCtrl', ecPurchasePaymentNodeListCtrl)