LigerUi之Grid使用详解(二)——数据编辑

一、问题概述

  在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率。所以上一篇文章为大家介绍了LigerGrid的显示数据的基本用法(传送门:http://blog.csdn.net/jerehedu/article/details/45192003  ),本次为大家继续介绍Grid的其他用法,比如使用LigerGrid如何进行数据编辑与保存。

  我们在做应用时可能会遇到这样的需求,要求在同一个页面可以同时编辑主从表数据并传递到后台保存,如下图所示页面:

  那如何使用LigerGrid如何进行数据编辑与保存呢?一起来看一下吧!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先需要在Vue项目中引入LigerUI的相关文件,可以通过CDN或下载LigerUI的文件进行引入。然后在Vue组件中定义一个grid组件,并在该组件中引入LigerUI的相关代码。 在Vue组件中的template中,可以使用LigerUI提供的grid标签来创建grid组件,例如: ``` <liger-grid :columns="columns" :data="data"></liger-grid> ``` 其中,columns是定义grid的列信息,data是要展示的数据信息。 在Vue组件中的script中,需要定义columns和data两个变量,例如: ``` <script> export default { name: 'MyGrid', data () { return { columns: [ { display: 'ID', name: 'id', width: 80, align: 'center' }, { display: 'Name', name: 'name', width: 120, align: 'left' }, { display: 'Email', name: 'email', width: 200, align: 'left' }, { display: 'Address', name: 'address', width: 200, align: 'left' } ], data: [ { id: 1, name: 'John', email: '[email protected]', address: 'New York' }, { id: 2, name: 'Jane', email: '[email protected]', address: 'London' }, { id: 3, name: 'Bob', email: '[email protected]', address: 'Paris' } ] } } } </script> ``` 以上是一个简单的示例,其中columns定义了grid的列信息,包括列名、列字段名、列宽度和对齐方式等,data定义了要展示的数据信息。 需要注意的是,LigerUIgrid组件需要在mounted生命周期中进行初始化,例如: ``` mounted () { this.$nextTick(() => { $(this.$el).ligerGrid({ columns: this.columns, data: this.data }) }) } ``` 以上代码中,使用jQuery选择当前组件的元素,然后调用ligerGrid方法进行初始化,传入columns和data参数。 最后,需要在组件销毁销毁grid组件,例如: ``` beforeDestroy () { $(this.$el).ligerDestroy() } ``` 以上是用Vue实现LigerUIgrid组件的基本步骤,可以根据实际需求进行调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值