JS组件系列——BootstrapTable 行内编辑解决方案：x-editable-优快云博客

本文介绍了x-Editable插件的使用方法，包括基本配置、样式设置及如何自定义传输参数等内容，并展示了如何通过JavaScript初始化插件来创建可编辑的弹出框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

一、x-editable组件介绍

x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：

根据博主一贯的风格，这里肯定是选用第一种喽。首先还是给出开源地址吧。

x-editable开源地址：https://github.com/vitalets/x-editable

x-editable文档地址：http://vitalets.github.io/x-editable/docs.html

x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html

1、x-editable初体验。

首先下载基于bootstrap的源码到本地。引用相关文件。

<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>

js初始化

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

效果展示

上面是通过html的data属性去设置x-editable的参数，当然，我也可以在初始化的时候去设置参数，比如，我仅仅给一个空的a标签：

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

js初始化

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

    });

查看效果

X-editable自定义传输参数

js端

 $('#innerIp').editable({
        url: 'updateSetting',
        type: 'text',
        pk: 1,
        name: '服务器内网IP',
        params: function (params) {
            //originally params contain pk, name and value
            params.key = 'AvcpIntranetIp';
            return params;
        },
        title: '输入服务器内网IP',
        validate: function(value) {
        	if ($.trim(value) == '((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)') return 'This field is required';
        }
    });

java后台端

    @RequestMapping(value = "/updateSetting", method = RequestMethod.POST)
    public @ResponseBody
    Map<String, Object> updateSetting(@Valid HttpServletRequest request) {
        Map<String, Object> map = new HashMap<String, Object>();
        String id = request.getParameter("pk");
        String key = request.getParameter("key");
        String name = request.getParameter("name");
        String value = request.getParameter("value");
        Setting setting = settingService.findSettingById(id);
        if (setting == null) {
            Setting newSetting = new Setting();
            newSetting.setcId(id);
            newSetting.setcKey(key);
            newSetting.setcName(name);
            newSetting.setcValue(value);
            newSetting.setnValid(1);
            settingService.addSetting(newSetting);
        } else {
            settingService.updateSetting(id, value);
        } 
        map.put("success", true);
        return map;
    }

x-editable实现默认列表数据从数据库中查询得到

jsp页面

 <a href="javascript:;" id="innerIp" >  </a>

js操作

function loadSettings(){
	$.ajax({
		type : "POST",
		url : "SettingController/getAllSettings",
		dataType : "json",
		data : null,
		success : function(json) {
			if (json) {
				fillSettings(json);
			}
		},
		error : function(json){
			alert("加载平台参数设置列表异常！");
		}
	});
}

查询得到数据库信息后，先对页面赋值，在执行初始化

function fillSettings(json) {
	$.each(json.settingsList, function(i, setting) {
		var cKey = document.getElementById(setting.cKey);
		if((null != setting) && (cKey)) {
			document.getElementById(setting.cKey).innerHTML = setting.cValue;
		}
	});
//	初始化平台参数信息列表
	FormEditable.init();
}

转载于:https://my.oschina.net/yuhangyes/blog/853537