LigerUi中GRID嵌入下拉框(select)示例!

      var csj_data;


      $.ajax
       ({
           cache: false,
           async: false,
           type: 'post',
           dataType: 'json',
           data: { aaa: "1" },
           url: "../handle/LaCode.ashx?ajaxaction=Select_FangAn",
           success: function (data) {
                    csj_data = data;
           }
       });


            { display: "所属方案", name: "Program_Id", width: 120, type: "text", align: "left", validate: { required: true },

                editor: { type: 'select', data: csj_data, valueColumnName: 'Program_Id', displayColumnName: 'Program_Name' },


                render: function (rowdata) {
                    for (var i = 0; i < csj_data.length; i++) {
                        if (csj_data[i]['Program_Id'] == rowdata.Program_Name)
                            return csj_data[i]['Program_Name']
                    }
                    return rowdata.Program_Name;
                }
首先需要在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: 'john@example.com', address: 'New York' }, { id: 2, name: 'Jane', email: 'jane@example.com', address: 'London' }, { id: 3, name: 'Bob', email: 'bob@example.com', 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
发出的红包

打赏作者

敦厚的曹操

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值