阅读目录

• 一、x-editable组件介绍
• 二、bootstrapTable行内编辑初始方案
• 三、bootstrapTable行内编辑最终方案
  • 1、文本框
  • 2、时间选择框
  • 3、下拉框
  • 4、复选框
  • 5、“阴魂不散”的select2
• 四、总结

回到顶部

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /><script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>

<a href="#" id="username" data-type="text" data-title="用户名">用户名</a>

    $(function () {$('#username').editable();});

<a href="#" id="username">用户名</a>

    $(function () {$('#username').editable({type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等title: "用户名",              //编辑框的标题disabled: false,             //是否禁用编辑emptytext: "空文本",          //空值的默认文本mode: "inline",              //编辑框的模式：支持popup和inline两种模式，默认是popupvalidate: function (value) { //字段验证if (!$.trim(value)) {return '不能为空';}}});});

<a href="#" id="department">选择部门</a>

    $(function () {$('#department').editable({type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],title: "选择部门",           //编辑框的标题disabled: false,           //是否禁用编辑emptytext: "空文本",       //空值的默认文本mode: "popup",            //编辑框的模式：支持popup和inline两种模式，默认是popupvalidate: function (value) { //字段验证if (!$.trim(value)) {return '不能为空';}}});});

回到顶部

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /><script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

<script type="text/javascript">var curRow = {};$(function () {$("#tb_user").bootstrapTable({toolbar: "#toolbar",idField: "Id",pagination: true,showRefresh: true,search: true,clickToSelect: true,queryParams: function (param) {return {};},url: "/Editable/GetUsers",columns: [{checkbox: true}, {field: "UserName",title: "用户名",formatter: function (value, row, index) {return "<a href=\"#\" name=\"UserName\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"用户名\">" + value + "</a>";}}, {field: "Age",title: "年龄",
            }, {field: "Birthday",title: "生日",formatter: function (value, row, index) {var date = eval('new ' + eval(value).source)return date.format("yyyy年MM月dd日");}
            },{field: "DeptName",title: "部门"}, {field: "Hodd",title: "爱好"}],onClickRow: function (row, $element) {curRow = row;},onLoadSuccess: function (aa, bb, cc) {$("#tb_user a").editable({url: function (params) {var sName = $(this).attr("name");curRow[sName] = params.value;$.ajax({type: 'POST',url: "/Editable/Edit",data: curRow,dataType: 'JSON',success: function (data, textStatus, jqXHR) {alert('保存成功！');},error: function () { alert("error");}});},type: 'text'});},});});</script>

 后台测试方法

回到顶部

 bootstrap-table-editable.js

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /><script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>

回到顶部

　　$(function () {$("#tb_user").bootstrapTable({toolbar: "#toolbar",idField: "Id",pagination: true,showRefresh: true,search: true,clickToSelect: true,queryParams: function (param) {return {};},url: "/Editable/GetUsers",columns: [{checkbox: true}, {field: "UserName",title: "用户名",editable: {type: 'text',title: '用户名',validate: function (v) {if (!v) return '用户名不能为空';}}}, {field: "Age",title: "年龄",}, {field: "Birthday",title: "生日",formatter: function (value, row, index) {var date = eval('new ' + eval(value).source)return date.format("yyyy-MM-dd");}},{field: "DeptName",title: "部门"}, {field: "Hobby",title: "爱好"                }],onEditableSave: function (field, row, oldValue, $el) {$.ajax({type: "post",url: "/Editable/Edit",data: row,dataType: 'JSON',success: function (data, status) {if (status == "success") {alert('提交数据成功');}},error: function () {alert('编辑失败');},complete: function () {}});}});});

        public JsonResult Edit(User user){//更新实体return Json(new { }, JsonRequestBehavior.AllowGet);}

　　　　　　  {field: "Age",title: "年龄",editable: {type: 'text',title: '年龄',validate: function (v) {if (isNaN(v)) return '年龄必须是数字';var age = parseInt(v);if (age <= 0) return '年龄必须是正整数';}}}

回到顶部

            {field: "Birthday",title: "生日",formatter: function (value, row, index) {var date = eval('new ' + eval(value).source)return date.format("yyyy-MM-dd");},editable: {type: 'date',title: '生日'}}

回到顶部

　　　　　　  {field: "DeptId",title: "部门",editable: {type: 'select',title: '部门',source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]}}

　　　　　　　　{field: "DeptId",title: "部门",editable: {type: 'select',title: '部门',source: function () {var result = [];$.ajax({url: '/Editable/GetDepartments',async: false,type: "get",data: {},success: function (data, status) {$.each(data, function (key, value) {result.push({ value: value.ID, text: value.Name });});}});return result;}}}

        public JsonResult GetDepartments(){var lstRes = new List<Department>();lstRes.Add(new Department() { ID = "1", Name = "研发部" });lstRes.Add(new Department() { ID = "2", Name = "销售部" });lstRes.Add(new Department() { ID = "3", Name = "行政部" });lstRes.Add(new Department() { ID = "4", Name = "创意部" });lstRes.Add(new Department() { ID = "5", Name = "事业部" });return Json(lstRes, JsonRequestBehavior.AllowGet);}

回到顶部

　　　　　　　{field: "Hobby",title: "爱好",editable: {type: "checklist",separator:",",source: [{ value: 'bsb', text: '篮球' },{ value: 'ftb', text: '足球' },{ value: 'wsm', text: '游泳' }],}}

回到顶部

<link href="~/Content/select2-bootstrap.css" rel="stylesheet" />
<link href="~/Content/select2-master/dist/css/select2.min.css" rel="stylesheet" />
<script src="~/Content/select2-master/dist/js/select2.full.min.js"></script>

　　　　　　　　{field: "Hobby",title: "爱好",editable: {type: 'select2',title: '爱好',name: 'Hobby',placement: 'top',success: function (response, newValue) {debugger;},error: function(response, newValue) {debugger;},url: function(params) {debugger;},source: [{ id: 'bsb', text: '篮球' },{ id: 'ftb', text: '足球' },{ id: 'wsm', text: '游泳' }],inputclass: 'input-large',select2: {allowClear: true,multiple: true,} }}

回到顶部

分类: JS

标签: bootstrap, js

« 上一篇：C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper
» 下一篇：C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（二）

很nice的组件。

支持(0)反对(0)

mark mark...

支持(0)反对(0)

支持IE8吗？ 不支持IE8 真不敢用 毕竟还是有很多用户 用这个版本浏览器

支持(0)反对(0)

多谢！

支持(0)反对(0)

超赞，优雅！

支持(0)反对(0)

文章写的很接地气！赞！x-editable的效果也很炫！

看了最终解决方案，有点疑问：如果有6列，编辑了5列或者更少，就想提交，就没法触发了。因为实际情况，不可能每次都全部编辑。

另外，我也遇到很楼主同样的问题，想整行编辑完，再提交。比如，我点编辑，所选行全部变为可编辑，编辑后点保存就可以提交。我看了x-editable的Demo，没有这样的效果。

支持(0)反对(0)

不错。

支持(0)反对(0)

select2我试验成功了啊。

支持(1)反对(1)

@ 平面人
嗯嗯，谢谢。

支持(0)反对(0)

楼主你好,我在试验的时候遇到了写问题想要向你请教一下,我添加了
<script type="text/javascript" src="/js/bootstrap/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap-table-editable.js"></script>
然后在列定义的时候加入了这个
editable:{
type: 'text',
title: 'id',
}},
属性,但是呢 在进入页面的时候会提示Cannot read property 'template' of undefined,点击相应列的时候会提示null not found. Have you included corresponding js file?着两个错误,请问我该怎么处理

支持(1)反对(0)

@
已经处理了,加载错文件版本

支持(0)反对(0)

厉害 了 我的 哥

支持(0)反对(0)

6666666666

支持(0)反对(0)

楼主您好：我想问个问题关于validate验证的，这里的验证参数只能是输入的值吗？比如我输入一个数，想判断这个值与其他列的值大小，怎么做呢。在validate里面没法用其他列的值吗

支持(0)反对(0)

@ 风猴蓝魔
引用 楼主您好：我想问个问题关于validate验证的，这里的验证参数只能是输入的值吗？比如我输入一个数，想判断这个值与其他列的值大小，怎么做呢。在validate里面没法用其他列的值吗
在validate里面取其他列的值估计是行不通的！
我的理解是，x-editable是一个和表格组件没有任何关系的独立组件，所以它里面的validate属性肯定也和表格没有任何关系，如果你非要这么做，可以考虑在onEditableSave事件里面去校验吧。

支持(0)反对(0)

@ 懒得安分
谢谢楼主我已经在save方法里面做了，另外楼主的这个问题 有没有研究：行内编辑的功能是每一个单元格提交到后台，这样会造成数据库的频繁操作，感觉不太合适。不知道有没有更好的方式，每行提交到后台。

支持(0)反对(0)

@ 懒得安分
onEditableSave: function (field, row, oldValue,$el,index) 我在源码哪里改一下可以在这里接收到index(就是行索引)，
因为我想重新定义个隐藏table，在Save里面把赋值进去，到时候一次性提交到后台

支持(0)反对(0)

@ 风猴蓝魔
这个问题一直都存在，因为上面说了，x-editable是一个和表格组件没有任何关系的组件。所以要自己处理。我们项目里面暂时没有处理这个频繁提交的问题，因为我们项目里面同一个表格既有弹出框编辑，又有行内编辑，用户可以自行选择。
至于能不能一次性提交，肯定是可以的！你的思路不错，可以自己去适当修改源码，最终达到你的需求。优化成功后欢迎分享！

支持(0)反对(0)

@ 平面人
多选可以吗

支持(0)反对(0)

Mark，有模态框的解决方法吗？

支持(0)反对(0)

牛逼，好使

支持(0)反对(0)

Select2多选 需要修改bootstrap-editable.js源码的itemsByValue方法 
当多选时,回传类似 ",1,2,3"的字符串,需要转换成数组

支持(0)反对(0)

楼主，能把你的源代码分享一份么

支持(0)反对(0)

博主您好，想请教一下，

怎样将这个应用到sourse里面呢，刚开始做项目，不太明白

支持(0)反对(0)

博主好。字段修改那里，如果自己定义修改字段好像不能触发 onEditableSave

还有一个问题，修改字段提交到后台，如果后台返回禁止修改，那要怎样阻止表格的值改变？

支持(1)反对(0)

bootstrapTable能适配到移动设备吗？我试了下，表头与表格不能对齐...

支持(0)反对(0)

如果要一次编辑完一整行的内容再确认呢？这样一个一个字段内容的确认操作起来好麻烦的感觉

支持(0)反对(0)

楼主，请问在编辑的下拉框中需要根据其他列的值作为参数去后台进行查询下拉框中的数据。那么在发送ajax请求是的data怎么获取其他列中的值啊。
因为source: function () {
var result = [];
$.ajax({
url: '/Editable/GetDepartments',
async: false,
type: "get",
data: {},
success: function (data, status) {
$.each(data, function (key, value) {
result.push({ value: value.ID, text: value.Name });
});
}
});
return result;
}
这个方法中没有像formatter中的value、row、index的参数啊。

支持(0)反对(0)

@ 千鸣
同问，怎么解决这个问题

支持(0)反对(0)

博主你好，您的这篇文章写的非常详细流畅，逻辑严谨，想必花了不少时间，我在向你学习的时候遇到个问题：测试页面报错，不知道可能帮忙看看
JS引入顺序：
<link href="${basePath}/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="${basePath}/lib/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="${basePath}/lib/bootstrap/css/bootstrap-table.css" rel="stylesheet" />

<script src="${basePath}/lib/jquery-1.11.3.js"></script>
<script src="${basePath}/lib/bootstrap/js/bootstrap.js"></script>
<script src="${basePath}/lib/bootstrap3-editable/js/bootstrap-editable.js" ></script>
<script src="${basePath}/lib/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${basePath}/lib/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
<script src="${basePath}/lib/bootstrap-table/js/bootstrap-table-editable.js" ></script>

页面报错，这个是bootstrap-editable.js，着实不懂源文件为什么找不到function，求帮助
Uncaught TypeError: date.getUTCDate is not a function
at Object.formatDate (bootstrap-editable.js:6126)
at Date.value2html (bootstrap-editable.js:6300)
at Editable.render (bootstrap-editable.js:1649)
at Editable.init (bootstrap-editable.js:1581)
at new Editable (bootstrap-editable.js:1484)
at HTMLAnchorElement.<anonymous> (bootstrap-editable.js:2146)
at Function.each (jquery-1.11.3.js:384)
at jQuery.fn.init.each (jquery-1.11.3.js:136)
at jQuery.fn.init.$.fn.editable (bootstrap-editable.js:2132)
at Object.<anonymous> (bootstrap-table-editable.js:114)

支持(0)反对(0)

已解决，但不知道为什么，删除下面ajax中的 complete: function () { }即可。

onEditableSave: function (field, row, oldValue, $el) {
$("#tb_departments").bootstrapTable("resetView");
$.ajax({
type: "post",
url: "/czxy/test/edit",
data: "{'deptName':'名称','deptID':'部门ID'}",
dataType: 'JSON',
success: function (data, status) {
if (status == "success") {
alert('提交数据成功');
}
},
error: function () {
alert('编辑失败');
},
complete: function () {

}
});
}

支持(0)反对(0)

棒棒棒，解决问题了，赞

支持(0)反对(0)

我爱你 楼主

支持(0)反对(0)

代码释疑：这里有一点需要说明一下，细心的园友可能发现了，我们这里的 field: "DeptId" ，为什么这里要配置DeptId而不是DeptName呢?很简单，因为我们需要和数据源里面的value值对应。
我看到这句话了 结果还因为这个问题花了半天时间才解决

支持(0)反对(0)

问问，怎么用ajax刷新select？

支持(0)反对(0)

mark mark mark

支持(0)反对(0)

很 nece的一片博客 ，楼主 666

支持(0)反对(0)

写的太好了
请教个小问题：时间选择框那里，那个时间选择框最上面应该分别有向左向右的箭头，默认情况下怎么出不来；横排的日期选择框怎么在bootstraptable里面借助bootstrap-table-editable.js实现
本人菜鸟，请大神指导啊

支持(0)反对(0)