Angular ui-grid 将列宽保存为 cookie

Posted 2023-02-19

【中文标题】Angular ui-grid 将列宽保存为 cookie

【英文标题】：Angular ui-grid Saving column width's as cookies

【发布时间】：2016-02-07 22:44:21

【问题描述】：

我，新来的，我的英语不太好。我正在使用带有角度的ui-grid。我的问题是我需要将列的宽度保存为 cookie，但我不知道如何 $watch 这些参数；/ 从数组读取宽度正在工作，但想在用户更改宽度时注册。 我的代码是：

 $scope.gridLicences = 
            headerRowHeight：65，
            行选择：真，
            enableColumnResizing: true,
            行高：31，
            showGridFooter：真，
            onRegisterApi：函数（gridApi）

        ,
        columnDefs: [

             name: 'Program.ProgramLine', displayName: "Linia", width: $scope.columnWidthTable[0], cellTemplate: '<div class="ui-grid-cell-contents "  title="TOOLTIP" >grid.getCellValue(row, col)</div>' ,
             name: 'Program.ProgramVersion', witdh: $scope.columnWidthTable[1], cellTemplate: '<div class="ui-grid-cell-contents "    title="TOOLTIP" >grid.getCellValue(row, col)</div>' 
        ],
        data:'licences'
    ;



    //watching changes - empty now 
    $scope.$watchCollection('columnWidthTable', function (newValues, oldValues) 
        if (newValues == oldValues) 
            return;
        
        else 

        
    );</pre>

【问题讨论】：

我不明白你的问题，你需要一种将信息写入cookies的方法还是你需要找到一种方法来拦截用户更改列宽的方法？

“你需要找到一种方法来拦截用户更改列的宽度”我需要那个。

【参考方案1】：

所以，我找到了解决方案，这是我的代码：

   function readCookie(index) 
        if ($cookies.columns != undefined || $cookies.columns != null) 
            var obj = JSON.parse($cookies.columns);
            return getValueByKey(obj,index);
        
        return undefined;

    ;

    function readCookies() 
        if ($cookies.columns != undefined || $cookies.columns != null) 
            var obj = JSON.parse($cookies.columns);
            $scope.columnWidthTable = obj;
        
    
     function saveCookie(index, value) 
        var obj = [];
        if ($cookies.columns != undefined || $cookies.columns != null) 
            obj = JSON.parse($cookies.columns);
        
        var param = getValueByKey(obj,index);
        if(param != null || param != undefined )
        
            setValueByKey(obj, index, value);
        
        else
            obj.push(key:index,val:value);                        
        $cookies.columns = JSON.stringify(obj);
     


     $scope.columnWidthTable = [];
     readCookies();
     $scope.gridOptions = ;


    $scope.gridOptions = 
        enableFiltering: true,
        headerRowHeight: 65,            
        rowSelection: true,
        enableColumnResizing: true,
        rowHeight: 31,
        showGridFooter: true,
        onRegisterApi: function(gridApi)
            $scope.gridApi = gridApi;


            $scope.gridApi.colResizable.on.columnSizeChanged($scope, function (colDef, deltaChange) 
                var val = parseInt(colDef['width']) + parseInt(deltaChange);
                saveCookie(colDef['colId'], val);
            );

        ,
        columnDefs: [
            
                name: 'Operacje',
                displayName: "Operacje",
                enableFiltering: false,
                cellTemplate: '<a style="text-align:center;" ng-click="openLicence(row)"><span class="glyphicon glyphicon-search open-button"></span></a>'
            ,
            
                name: 'Program.ProgramLine',
                displayName: "Linia",  
                cellTemplate: '<div class="ui-grid-cell-contents "   title="TOOLTIP" >grid.getCellValue(row, col) </div>'
            ,
            
                name: 'Program.ProgramVersion',
                displayName: "Wersja",
                cellTemplate: '<div class="ui-grid-cell-contents "   title="TOOLTIP" >grid.getCellValue(row, col)</div>'
            ,
            
               name: 'Program.ProgramDescription',
               displayName: "Opis",
               cellTemplate: '<div class="ui-grid-cell-contents "   title="TOOLTIP" >grid.getCellValue(row, col)</div>'
            ,
            
                name: 'Program.ProgramVersion',
                displayName: "Wersja",
                cellTemplate: '<div class="ui-grid-cell-contents "    title="TOOLTIP" >grid.getCellValue(row, col)</div>'
            ,
            
                name: 'Quantity',
                displayName: "Il. stanowisk",
                cellTemplate: '<div class="ui-grid-cell-contents "   title="TOOLTIP" >grid.getCellValue(row, col)</div>'
            ,
            
                name: 'SeriesNumber',
                displayName: "Nr seryjny",
                cellTemplate: '<div class="ui-grid-cell-contents "   title="TOOLTIP" >grid.getCellValue(row, col)</div>'
            ,
            
                name: 'SalesDocument',
                displayName: "Nr faktury",                 
                cellTemplate: '<div class="ui-grid-cell-contents "    title="TOOLTIP" >grid.getCellValue(row, col)</div>'
            ,
            
                name: 'SalesDocumentDate',
                displayName: "Data",
                cellTemplate: '<div class="ui-grid-cell-contents "    title="TOOLTIP" >grid.getCellValue(row, col) | date:\'yyyy-MM-dd\'</div>'

            ,
            
                name: 'Symfopakiet',
                displayName: "Gwarancja",
                filter:
                    

                        type: uiGridConstants.filter.SELECT,
                        selectOptions: [ value: 'Tak', label: 'Tak' ,  value: 'Nie', label: 'Nie' ]
                    ,
                cellTemplate: '<div class="ui-grid-cell-contents "    title="TOOLTIP" >grid.getCellValue(row, col)</div>'
            ,
            
                name: 'SP_From',
                displayName: 'Do',
                cellTemplate: '<div class="ui-grid-cell-contents "   title="TOOLTIP" >grid.getCellValue(row, col)</div>'
            ,
            
                name: 'SP_From',
                displayName: 'Termin wypowiedzenia',
                cellTemplate: '<div class="ui-grid-cell-contents "   title="TOOLTIP" >grid.getCellValue(row, col) | date:\'yyyy-MM-dd\'</div>'
            

        ],
        data:'licences'
    ;

    $.each($scope.gridOptions.columnDefs, function (index) 
        var value = getValueByKey($scope.columnWidthTable, index);
        $scope.gridOptions.columnDefs[index].width = value == null ? 100 : value;
        $scope.gridOptions.columnDefs[index].colId = index;
    );

    function getValueByKey(array, id) 
        for (var i in array) 
            if (array[i].key == id)
                return array[i].val;
                                   
        return null;
    

    function setValueByKey(array, id, value) 
        for (var i in array) 
            if (array[i].key == id)
                 array[i].val=value;