layui关闭表格编辑_Layui表格table关闭拖拽列宽、禁用拖拽列宽

table 模块是Layui的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。

我们在使用过程中,如果需要关闭Layui表格table拖拽列宽、禁用拖拽列宽,可以用到unresize参数:是否禁用拖拽列宽(默认:false)。默认情况下会根据列类型(type)来决定是否禁用,如复选框列,会自动禁用。而其它普通列,默认允许拖拽列宽,当然你也可以设置 true 来禁用该功能。

实例:这里设置为unresize: false,即可.layui.use(['form', 'table'], function () {

var $ = layui.jquery,

form = layui.form,

table = layui.table;

table.render({

elem: '#currentTableId',

url: '',

toolbar: '#toolbarDemo',

defaultToolbar: ['filter', 'exports', 'print', {

title: '提示',

layEvent: 'LAYTABLE_TIPS',

icon: 'layui-icon-tips'

}],

cols: [[

{type: "checkbox", width: 50},

{field: 'id', width: 80, title: 'ID', sort: true},

{field: 'username', minwidth: 80, title: '账号'},

{field: 'admin_realname', minwidth: 80, title: '姓名'},

{field: 'created_at', width: 150, title: '管理员级别'},

{field: 'created_at', title: '添加时间',  width: 160, sort: true},

{field: 'updated_at', width: 160, title: '最近修改', sort: true},

{field: 'stop', width: 80, title: '状态', sort: true},

{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}

]],

limits: [10, 15, 20, 25, 50, 100],

limit: 15,

page: true,

unresize: false,

// skin: 'line',

response: {

statusName: 'code' //规定数据状态的字段名称,默认:code

,statusCode: 200 //规定成功的状态码,默认:0

,msgName: 'msg' //规定状态信息的字段名称,默认:msg

,countName: 'count' //规定数据总数的字段名称,默认:count

,dataName: 'data' //规定数据列表的字段名称,默认:data

}

});

});

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Vue 2 的 `Table` 组件本身并不支持表格拖拽的功能,但可以通过自定义实现来实现该功能。 以下是一个简单的实现思路: 1. 在 `Table` 组件中添加一个 `draggingRowIndex` 属性,用于保存当前正在被拖拽的行的索引。 2. 在 `Table` 组件中添加 `handleMouseDown` 方法,用于在鼠标按下时设置 `draggingRowIndex` 属性。 3. 在 `Table` 组件中添加 `handleMouseMove` 方法,用于在鼠标移动时根据当前鼠标位置计算出被拖拽的行应该被插入到哪个位置,并更新数据源。 4. 在 `Table` 组件中添加 `handleMouseUp` 方法,用于在鼠标抬起时清除 `draggingRowIndex` 属性。 在实现拖拽功能时,你需要注意以下几点: 1. 拖拽的行不能是表头。 2. 拖拽的行不能是合并单元格的一部分。 3. 拖拽的行不能是被禁用的行。 4. 拖拽的行不能是被选中的行。 5. 拖拽的行不能拖拽表格之外。 以下是一个简单的实现示例: ```vue <template> <a-table :columns="columns" :dataSource="dataSource" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"> <template #name="text"> <span v-if="text.dataIndex === 'name'" :class="{ dragging: text.index === draggingRowIndex }">{{ text.text }}</span> <span v-else>{{ text.text }}</span> </template> </a-table> </template> <script> export default { data() { return { draggingRowIndex: -1, // 当前正在被拖拽的行的索引 dataSource: [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' }, ], columns: [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, ], }; }, methods: { handleMouseDown(event, row) { // 如果不是左键点击或者拖拽的行不能被拖拽,则返回 if (event.button !== 0 || !this.canDragRow(row)) { return; } this.draggingRowIndex = row.index; }, handleMouseMove(event, row) { // 如果没有拖拽行或者拖拽的行不能被拖拽,则返回 if (this.draggingRowIndex === -1 || !this.canDragRow(row)) { return; } const draggingRow = this.dataSource[this.draggingRowIndex]; const overRowIndex = row.index; // 如果拖拽行和悬停行相同,则返回 if (this.draggingRowIndex === overRowIndex) { return; } // 将拖拽行从数据源中删除 this.dataSource.splice(this.draggingRowIndex, 1); // 计算拖拽行应该被插入的位置 const insertIndex = overRowIndex > this.draggingRowIndex ? overRowIndex - 1 : overRowIndex; // 将拖拽行插入到数据源中 this.dataSource.splice(insertIndex, 0, draggingRow); // 更新当前拖拽行的索引 this.draggingRowIndex = insertIndex; }, handleMouseUp() { // 清除当前拖拽行的索引 this.draggingRowIndex = -1; }, canDragRow(row) { // 表头、合并单元格的单元格、禁用的行、选中的行不能被拖拽 return !row.header && !row.cells.some((cell) => cell.rowSpan > 1 || cell.colSpan > 1) && !row.disabled && !row.selected; }, }, }; </script> <style scoped> .dragging { opacity: 0.5; } </style> ``` 在示例中,我们利用 `mousedown`、`mousemove` 和 `mouseup` 事件来实现表格拖拽功能。在 `handleMouseDown` 方法中,我们记录下当前拖拽的行的索引;在 `handleMouseMove` 方法中,我们根据当前鼠标位置计算出拖拽行应该被插入的位置,并更新数据源;在 `handleMouseUp` 方法中,我们清除当前拖拽行的索引。同时,我们还添加了一个 `canDragRow` 方法,用于判断某一行是否可以被拖拽
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值