生活随笔
收集整理的這篇文章主要介紹了
Bootstrap的x-editable行编辑
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
x-editable插件支持行編輯
首先，引入Jquery的JS，Bootstrap的CSS和JS
然后，引入插件的CSS和JS
<link type="text/css" href="${ctx}/static/comp/jquery-ui-bootstrap/css/bootstrap-editable.css" rel="stylesheet">
<script src="${ctx}/static/comp/jquery-ui-bootstrap/js/bootstrap-editable.js" type="text/javascript"></script>
頁面代碼
業務需要這個表格是拼的，列舉兩個字段
td = $('
<td style="text-align:center;" class="assayItemData" columnName="' + filedName + '" >' + '
<a href="#" class="isNormal" data-pk="' + filedName + ',' + sampleData['id'] + '" data-assayItemID="' + sampleData['id'] + '" data-defaultValue="' + sampleData['defaultValue'] + '" data-type="text" data-title="">' + dataName + '
</a></td>');
td = $('
<td style="text-align:center;" columnName="' + filedName + '" >' + '
<a href="#" class="isData" data-pk="' + filedName + ',' + sampleData['id'] + '" data-type="date" data-title="">' + dataName + '
</a></td>');
JS代碼
這里，isNormal和isData是對應td中a標簽的class
function isNormal() {$(
'.isNormal').editable({type:
"text", title:
"", disabled:
false, showbuttons:
false, emptytext:
"———", mode:
"inline", validate:
function (value) { alert(value);
if (!$.trim(value)) {
return '不能為空';}},url:
function (param) {var value =
'';value =
'' + param.pk +
',' + param.value +
'';$.ajax({type:
'POST',url: ctx +
"/biz/assay-item-data/update",data: {value: value},dataType:
'JSON',success:
function (res) {if (res.message !=
null && res.message !=
'') {setMessage(res.message);}},error:
function () {}});}});
}
function isData() {$(
'.isData').editable({type:
'datetime',field:
"data",title:
"日期",showbuttons:
false,emptytext: getDatetime(),formatter:
function (value, row, index) {var date =
eval(
'new ' +
eval(value).source);
return date.format(
"yyyy-MM-dd HH:mm:ss");},editable: {type:
'date',title:
'日期'},url:
function (param) {var data =
'';data = param.pk +
',' + param.value;$.ajax({type:
'POST',url: ctx +
"/biz/assay-item-data/update",data: {value: data},dataType:
'JSON',success:
function (res) {if (res.message !=
null && res.message !=
'') {}},error:
function () {}});}});
}
官網
http://vitalets.github.io/x-editable/
http://vitalets.github.io/x-editable/docs.html#editable
有問題，看文檔
總結
以上是生活随笔為你收集整理的Bootstrap的x-editable行编辑的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
