李炎恢 DataGrid组件 8: 冻结列，行右键菜单

最新推荐文章于 2021-11-24 21:01:55 发布

tiz198183

最新推荐文章于 2021-11-24 21:01:55 发布

阅读量386

点赞数 1

分类专栏： easyUI

本文链接：https://blog.csdn.net/litao2/article/details/95456926

版权

本文档详细介绍了如何在DataGrid组件中实现冻结列和添加行右键菜单的功能。通过配置`frozenColumns`实现冻结列，并展示了相关列的定义。同时，演示了行右键菜单的实现，包括添加、编辑、删除操作，以及菜单显示和隐藏的逻辑处理。

摘要由CSDN通过智能技术生成

1、冻结列

fitColumns: false,
frozenColumns: [[
{
field: 'id',
title: '编号',
sortable: true,
width: 100,
checkbox: true,
},
{
field: 'user',
title: '帐号',
width: 100,
editor: {
type: 'validatebox',
options: {
required: true, //属性
}
},
},
]],
columns: [[
{
field: 'email',
title: '邮件',
width: 100,
editor: {
type: 'validatebox',
options: {
required: true,
validType:'email',
}
},
},
{
field: 'date',
title: '注册时间',
editable: false,
width: 100,
editor: {
//type: 'datebox',
type: 'datetimebox',
options: {
required: true,
},
},
},
]],

2、行右键菜单

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/easyui/jquery.min.js"></script>
<script src="~/easyui/jquery.easyui.min.js"></script>
<script src="~/easyui/locale/easyui-lang-zh_CN.js"></script>
<link href="~/easyui/themes/gray/easyui.css" rel="stylesheet" />
<link href="~/easyui/themes/icon.css" rel="styleshe