bootstrap table实现x-editable的行单元格编辑 下拉框 多种动态取值方式取值 并解决数据Empty

8 篇文章 0 订阅
3 篇文章 0 订阅

$('#labelName').bootstrapTable({

  pagination : false,//是否分页

      columns: [

    {

      field: 'label',

      title: '标签名称'

    },

    {

      field: 'key',

      title: '主键选择',

      editable: {

              type: 'select',

              title: '主键选择',

              mode: "inline",

              width: 150,

              source: function(row){

                  var result = [];

                         // 1获取list的时候就把数据拼接好,减少页面请求

                  var getData = $('#labelName').bootstrapTable('getData'),

                      index = $(this).parents('tr').data('index');

                      console.log(getData[index].data) 

                              $.each(getData[index].data, function (key,value) {

                            result.push({ value:value, text:value });

                         });

                          //2.通过后台发请求获取

                  $.ajax({

                      url:aicKnowledge + 'update/getProperties',

                      async: false,

                      type: "get",

                      data: {

                        id:jumpId,

                        label:getData[index].label

                      },

                      success: function (datas, status) {

                         if(datas.code == 600){

                            var items = datas.data;

               $.each(items, function (key,value) {

                            result.push({ value:value, text:value });

                         });

                          }

                      }

                   });

                   return result;

              },

              noeditFormatter: function (value, row, index) { // 解决展示为empty的问题

                   var process={filed:"key",value:value};

                   return ['<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ',

                      ' data-name="'+process.filed+'"',

                        ' data-pk="1"',

                        ' data-value="' + process.value + '"',

                        '>' + process.value + '</a>'

                       ].join('');;

                    }

                }

    }

  ],

}

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要指定 Bootstrap Table 的某一某一列启用编辑,可以使用 x-editable 插件的 `data-pk`、`data-name` 和 `data-value` 属性。具体步骤如下: 1. 在 Bootstrap Table 的列定义,为需要启用编辑的列添加 `data-editable="true"` 属性,如下所示: ```html <th data-field="name" data-editable="true">Name</th> <th data-field="email">Email</th> <th data-field="phone" data-editable="true">Phone</th> ``` 2. 在 Bootstrap Table 的每一,为需要启用编辑单元格添加 `data-pk`、`data-name` 和 `data-value` 属性,如下所示: ```html <tr> <td data-pk="1" data-name="name" data-value="John" class="editable">John</td> <td data-pk="1" data-name="email" data-value="john@example.com">john@example.com</td> <td data-pk="1" data-name="phone" data-value="123456789" class="editable">123456789</td> </tr> <tr> <td data-pk="2" data-name="name" data-value="Jane" class="editable">Jane</td> <td data-pk="2" data-name="email" data-value="jane@example.com">jane@example.com</td> <td data-pk="2" data-name="phone" data-value="987654321" class="editable">987654321</td> </tr> ``` 其,`data-pk` 属性指定的唯一标识,`data-name` 属性指定需要编辑的列名,`data-value` 属性指定单元格的初始值。 3. 使用 x-editable 插件初始化可编辑单元格,如下所示: ```javascript $('.editable').editable({ type: 'text', url: '/post', title: 'Enter value', pk: $(this).data('pk'), name: $(this).data('name'), value: $(this).data('value') }); ``` 其,`type` 属性指定编辑控件的类型,如文本下拉框等,`url` 属性指定更新数据的 URL,`title` 属性指定编辑的标题,`pk`、`name` 和 `value` 属性从对应的单元格获取。 这样,指定的和列就可以启用编辑了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值