【问题标题】:ANGULAR JS UI-GRID :How to Create Dynamically Row based DropDownANGULAR JS UI-GRID:如何动态创建基于行的下拉菜单
【发布时间】:2020-12-16 06:54:46
【问题描述】:

我正在做一个项目,我试图在 UI 网格中添加一个下拉列表,这些下拉列表的值应该直接来自数据库。我怎样才能实现这个功能?并添加代码和html

这是我实现的代码

控制器 JS

function
 fetchData ()
 {
  $http({
  url: "api/GetAllpattern",
  method: 'GET',
  dataType: 'json',
  headers: { "Content-Type": "application/json" }
 }).then(function (result) {
 if (result) {
 $scope.gridOptions.data = result.data;
            }});}

 $scope.gridOptions = {
        rowHeight: 38,
        enableFullRowSelection: true,
        multiSelect: true,
        columnDefs: [
            { name: 'Slno' },
            { name: 'Name', type: 'number' },
            {
                name: 'Pattern',
               // editableCellTemplate: 'uiSelect',
                cellFilter: 'mapGender',
                enableCellEdit: true,
                editType: 'dropdown',
                editableCellTemplate: 'ui-grid/dropdownEditor',
                editDropdownValueLabel: 'displayName',
                editDropdownValueLabel: 'Pattern', editDropdownOptionsArray: [
                    { id: 1, gender: 'male' },
                    { id: 2, gender: 'female' },
                ],
                 editDropdownValueLabel: 'type',
               },
   ]};
}

HTML 标记

<div ui-grid="gridOptions"
     ui-grid-selection
     ui-grid-edit
     class="grid">

【问题讨论】:

    标签: angularjs ui-grid


    【解决方案1】:
    function loadcourseGrid() {
        var params = { 'SchoolCollege': $scope.usersList.SchoolCollege };
        $http({
            url: "api/GetAllcourse",
            method: 'GET',
            dataType: 'json',
            params: params,
            headers: { "Content-Type": "application/json" }
        }).then(function (result) {
            if (result) {
                var coursedata = result.data;
               
                for (i = 0; i < coursedata.length; i++) {
                    if (coursedata[i].PatternSlno == 1) {
                        coursedata[i].PatternName = 'WEEKLY';
                    } else if (coursedata[i].PatternSlno == 2) {
                        coursedata[i].PatternName = 'FORTNIGHT';
                    }
                    else if (coursedata[i].PatternSlno == 3) {
                        coursedata[i].PatternName = 'MONTHLY'
                    }
                    else {
                        coursedata[i].PatternName = 'Choose Pattern .. '
                        coursedata[i].PatternSlno = 0;
                    }
                }
                $scope.gridOptionscourse.data = coursedata;
            }
        });
    }
    

    【讨论】:

    • 虽然此代码可以解决问题,including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量,并可能导致更多的赞成票。请记住,您正在为将来的读者回答问题,而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。
    猜你喜欢
    • 2014-11-14
    • 1970-01-01
    • 2023-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-05
    • 2020-05-01
    • 1970-01-01
    相关资源
    最近更新 更多