[原创] 即时编辑 html JQuery 库 - Jeditable

创建时间：2018-03-27 投稿人：浏览次数：174

官网地址: https://appelsiini.net/projects/jeditable/
Github 地址: https://github.com/NicolasCARPi/jquery_jeditable

这是实现的仅仅是修改 HTML 的展示, 所以不需要发请求提交更改.
editable 第一个参数设置为 function 即可替换默认的函数.

示例

<html>
    <head>
        <script type="text/javascript" src="/static/js/jeditable-2.0.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-3.3.7.min.css" />
    </head>
    <body>
        <p class="edit-area">Q: Test question</p>
        <p class="edit-area">A: Test for answer</p>

        <script language="javascript">
            $(document).ready(function() {
                $(".edit-area").editable(function(input, settings, elem) {
                    console.info("Changed Value: ", input)
                    // WARNING: $(elm).data 必须调用, 否则元素只能编辑一次
                    console.info($(elem).data("_"));
                    $(this).html(input);
                }, {
                    // submit: "OK", // 设置后会显示确认按钮
                    // cancel: "Cancel", // 设置后会显示取消按钮
                    event: "dblclick", // 默认为 click, 这里修改为双击进入编辑模式
                    cssclass: "bs-example bs-example-form", // css class name, 编辑模式会生成 form, 这里使用的 bootstrap 的一个表单样式
                    select: false, // 是否默认全选
                    onblur: "submit", // 鼠标失去光标的操作. submit 保留更改. cancel 会取消标记. 默认为 calcel.
                    type: "textarea", // input 类型
                    style: "color: blue" // 设置样式, 会覆盖 cssclass 中的设置
                });
            };
        </script>
    </body>
</html>

注意事项

editable 第一个参数如果是 function, HTML 元素想多次编辑, 必须调用 $(elem).data 这个函数, 参数可以随意设置. 否则编辑过一次之后, 双击没有反应了.

更多设置可以查看 editable 源码, 比文档更详细一些.
https://github.com/NicolasCARPi/jquery_jeditable/blob/master/src/jquery.jeditable.js

参考文章:

<jquery EditInPlace 插件表格单击双击编辑行> - https://blog.csdn.net/zilin110/article/details/51554899
<Jeditable 即时编辑 Jquery 插件用法 (.Net)> - https://blog.csdn.net/shulin85/article/details/7249223
<Jeditable> - https://appelsiini.net/projects/jeditable/
<jquery实时编辑插件jeditable详细使用文档> - http://www.xiaomlove.com/2014/06/02/jquery实时编辑插件jeditable详细使用文档/

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。