x-editable在bootstrapTable里的实践-纯html属性-网上大多js用不惯

本文链接：https://blog.csdn.net/binghuanlanhu/article/details/91540743

引入参考文档：https://www.cnblogs.com/landeanfen/p/5821192.html

看了这篇文章选择了这个插件，就开始做了，结果发现好多html属性不生效，网上大多js 但我原来项目都是html写的就差看了BT官网和x-editable官网（文章最后附有地址）还是踩了一些坑，最后改了源码才勉强可以看看-鉴于项目中就用到了text和checklist两种类型，所以就讲这两个不过也够了入门剩下都差不多.......

前后零零散散花了两天的时间踩坑还有很多不足有待后续完善比如复选框全选反选的扩展

实践：

页面引入插件：前两个x-editable，最后一个bootstrapTable集成x-editable

<link href="${ctx}/js/plugins/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> <script src="${ctx}/js/plugins/bootstrap3-editable/js/bootstrap-editable.min.js?t=${now}"></script> <script src="${ctx}/js/plugins/bootstrap3-editable/js/bootstrap-table-editable.min.js?t=${now}"></script>

JSP页面 bootstrapTable属性配置 一般data-editabl-*(*对应x-editable里的option)
<table data-toggle="table" id="dataTable"  data-height="320"
       data-pagination="true" data-striped="true" data-query-params="getMenuParams"
       data-cache="true" data-page-size="${defaultPageSize}" data-page-list="${pageList}" >
    <thead>
    <tr>
        <th data-field="rowNum" data-width="40px" data-formatter="formatRowNum" data-align="center">序号</th>
        <th data-field="name" data-align="center" data-width="150px" >套餐名称</th>
        <th  data-field="isvIds" data-align="center" data-width="250px"  data-editable="true"  data-editable-type="checklist" data-editable-source="${isvList}">上架渠道</th>
    </tr>
    </thead>
</table>

<table class='table table-striped table-hover'
       id="dataTable"
       data-toggle="table"
       data-url="${ctx}/menuProj/getGridData?t=${now}"
       data-pagination="true"
       data-side-pagination="server"
       data-striped="true"
       data-response-handler="handleServerResult"
       data-query-params-type=""
       data-query-params="getParams"
        data-pagination-h-align="left"
       data-cache="true" data-page-number="${not empty searchForm.pageNo?searchForm.pageNo:1}" data-page-size="${not empty searchForm.pageSize?searchForm.pageSize:defaultPageSize}"  data-page-list="${pageList}">
    <thead>
    <tr>
        <th data-field="checkBx" data-checkbox="true"></th>
        <th data-field="id" data-visible="false">主键ID</th>
        <th data-field="sortNum" data-align="center" data-width="15px" data-editable="true" data-editable-placeholder="默认999" data-editable-emptytext="999" data-editable-validate='validateSort'>排序</th>
        <th data-field="code"  data-visible="false">编码</th>
        <th data-field="menuName" data-align="center" data-width="100px">套餐名称</th>
        <th data-field="type" data-align="center" data-width="90px" data-formatter="formatType">体检项目类型</th>
      
        <th data-field="oper" data-align="center" data-formatter="actionFormatter"  data-events="actionEvents"  data-width="90px">操作</th>
    </tr>
    </thead>
</table>

踩坑：有些属性死活不支持比如data-editable-validate 查看源码才发现方法类型字符串不识别只能改源码应急了-不知还有什么更好方法欢迎大家给我意见，这之前排除版本之类的问题

js相关属性

两个保存-参考源码 Bt扩展这样写才行 事件好像都要这么写才生效
$("#dataTable").on("editable-save.bs.table",function(e,field, row, oldValue, $el){//change事件
    doSave(row);
});

$("#dataTable").on("editable-save.bs.table",function(e,field, row, oldValue, $el){//change事件
    selectedRow=row;
    changeSort(oldValue);
});

校验格式：data-editabl-validateSort 对应html属性

  function validateSort(value) {
      return isZRS(value)?"":"请输入自然数";
    }
function isZRS(str) {
    if (str == null || str == '') return true;
    if (/^\d+$/.test(str)) return true;
    return false;
}