欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

UI-grid 表格内容可编辑(enableCellEdit可指定列编辑)

程序员文章站 2022-03-07 22:56:49
ui-grid实现行编辑,使用enableCellEdit禁止某些行的编辑 ......

在网上搜索了很多关于ui-grid的问题

很遗憾好少啊啊啊

UI-grid 表格内容可编辑(enableCellEdit可指定列编辑)

 

不过有api还是比较欣慰的

官方api:ui grid

还有一位大佬的翻译的中文api:

行编辑的官方api传送门:http://ui-grid.info/docs/#!/tutorial/tutorial:%20205%20row%20edit%20feature

 

好了,回到主题。行编辑,在div中加入属性

<div style="width: 100%;height: 398px;text-align: center;" class="ui-grid" id="command-grid"
     ui-grid="gridoptions" ui-grid-resize-columns
     ui-grid-pagination ui-grid-pinning ui-grid-selection ui-grid-move-columns
     ui-grid-save-state ui-grid-auto-resize ui-grid-edit>
</div>

标红变大的部分:ui-grid-edit

效果为如下动图

UI-grid 表格内容可编辑(enableCellEdit可指定列编辑)

可以实现行编辑的效果,可是列表的全部数据都可以编辑!

这显然不是我们要的需求

我们只需要指定某些字段可以进行编辑

使用:enablecelledit

官方api传送门:http://ui-grid.info/docs/#!/api/ui.grid.edit.api:gridoptions

好了,使用谷歌翻译出意思是这样说的

UI-grid 表格内容可编辑(enableCellEdit可指定列编辑)

ok,enablecelledit默认是true,需要手动指定为false,禁止编辑

在columndefs中,enablecelledit : false

{
    field: 'projectshortname', displayname: '项目简称', width: 300, pinnedleft: true, enablecelledit: false,
    celltemplate: "<span>{{(row.entity.projectshortname != undefined) ? (row.entity.projectshortname) : '-'}}</span>"
},

就ojbk啦

--------------------------------------------