uigrid 相关的2个 cell editor

最新推荐文章于 2021-11-11 12:00:32 发布

Henry_Wu001

最新推荐文章于 2021-11-11 12:00:32 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

分类专栏： js uigrid web

本文链接：https://blog.youkuaiyun.com/Henry_Wu001/article/details/80826879

web 同时被 3 个专栏收录

58 篇文章

订阅专栏

53 篇文章

订阅专栏

uigrid

2 篇文章

订阅专栏

本文介绍如何在UI Grid中实现定制化的单元格编辑功能，包括使用WdatePicker进行日期时间选择及创建二级下拉菜单。针对日期时间选择器在单元格编辑中的表现问题，提出了解决方案，并详细描述了整合过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

refs:

https://stackoverflow.com/questions/18144142/jquery-ui-datepicker-with-angularjs

https://stackoverflow.com/questions/30296406/using-angular-bootstrap-datepicker-inside-of-ui-grid-unstable-3-0-0

https://angular-ui.github.io/bootstrap/

https://www.formget.com/angular-link-function/

http://www.cnblogs.com/TiestoRay/p/5085721.html

http://ui-grid.info/docs/#!/tutorial

最近需要对uigrid的cell编辑客制化，一个是日期时间的选择，一个是2级菜单的选择。

1）时间日期uigrid自带date的选择，没有时间，angular版bootstrap带日期时间，但是不太好看(挺大的界面，时间选择却很小),其他jquery有angular的实现也不太喜欢，关键其他位置已经有一个WdatePicker的使用，为界面和谐，所以继续使用这个控件。

纯粹的使用没有问题，当放入cell中时会出现编辑完成后不会自动回到编辑完成状态，为此，参考了

https://stackoverflow.com/questions/30296406/using-angular-bootstrap-datepicker-inside-of-ui-grid-unstable-3-0-0

中的实现，主要是点击windows其他位置接收编辑。

同时对input的click事件和wdatepicker的选择完成事件做了处理,该方法出入了dp来获取当前时间，用cellNav来获取当前cell。


        var rowCol = $scope.gridApi.cellNav.getFocusedCell();
        if (rowCol !== null) {
            //$scope.currentFocused = 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name;
            var cc=rowCol.col.column
            console.log("get :" + 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name + ' pre_donetime:' + rowCol.row.entity.pre_donetime + " dp:" + dp.cal.getNewDateStr());
            var oldVal = rowCol.row.entity.pre_donetime;
            var newVal = dp.cal.getNewDateStr();            

            var dtOld = (new Date(oldVal)).format("yyyy-MM-dd HH:mm:ss");
            var dtNew = (new Date(newVal)).format("yyyy-MM-dd HH:mm:ss");            
            console.log("oldDate:" + dtOld)
            console.log("newDate:" + dtNew)
            if (dtNew !== dtOld) {
                rowCol.row.entity.pre_donetime = dtNew;
                
                //$scope.gridApi.edit.raise.afterCellEdit(rowCol.row.entity, rowCol.col.colDef, dtNew, dtOld);               
            }            
        }

不是很完美，如果能在 uiGridEditDatepicker 的directive中实现就更好了。

2）下拉列表二级选择框，uigrid自带一级dropdownlist，无法满足当前状态。所以，新建一个页面做这个事情，用top.artDialog 方式似乎很难获取返回值，所以参考了angular的boostrap版本，其中有很多modal模板，已经说明，

https://angular-ui.github.io/bootstrap/

这种内嵌在html中type="text/ng-template"方式，成功把2个页面合并成了一个页面。