`

jquery.jeditable的改造

 
阅读更多
DataTables作为开源的jquery表格插件,对于编辑控件这块做的还远远不够,官方默认的Editor是收费的,而且功能也非常不齐全,并且这些可编辑插件都是实时在线编辑为主。不得已之下我对jeditable做了写扩展。

背景: Jeditable在线可编辑表单插件,即它是时时保存的,只要修改完就提交到服务器了。
但是很多基于表格式的数据新增、修改不需要时时保存,等数据都输入完成之后再统一提交到服务器进行保存。

jeditable的插件思路是,在控件处增加form标签,并嵌入input、select、textarea等控件,使用form提交的方式将数据提交到服务器。

源码修改,在322处,增加一个参数dataAction, 如果是local,则表示数据编辑好之后,提交到本地。
} else if(settings.dataAction == "local"){
    // 对控件做了扩展,增加了设置值和获取值
    setValue.apply(self, [input.val(), settings]);
    getValue.apply(self, [input.val(), settings]);
    self.editing = false;
    callback.apply(this, [this.innerHTML, settings])
    if (!$.trim($(this).html())) {
        $(this).html(settings.placeholder);
    }
} else {


扩展select控件,此控件是配合DataTables进行表格编辑的
select: {
    getValue: function(value, settings){
        var data = settings.data;
        $(this).html(data[value]);
    },
    setValue: function(value, settings){
        var oTable = settings.oTable;
        var colIdx = settings.colIdx;
        var rowIdx = settings.rowIdx;
        oTable._fnSetCellData(rowIdx, colIdx, value);
    },
    element : function(settings, original) {
        var select = $('<select />');
        $(this).append(select);
        return(select);
    },
    content : function(data, settings, original) {
        /* If it is string assume it is json. */
        if (String == data.constructor) {     
            eval ('var json = ' + data);
        } else {
        /* Otherwise assume it is a hash already. */
            var json = data;
        }
        for (var key in json) {
            if (!json.hasOwnProperty(key)) {
                continue;
            }
            if ('selected' == key) {
                continue;
            }
            var option = $('<option />').val(key).append(json[key]);
            $('select', this).append(option);   
        }                   
        /* Loop option again to set selected. IE needed this... */
        $('select', this).children().each(function() {
            if ($(this).val() == json['selected'] ||
                $(this).text() == $.trim(original.revert)) {
                    $(this).attr('selected', 'selected');
            }
        });
        /* Submit on change if no submit button defined. */
        if (!settings.submit) {
            var form = this;
            $('select', this).change(function() {
                form.submit();
            });
        }
    }
},
分享到:
评论

相关推荐

    jquery.jeditable.js

    jquery.jeditable.js开发工具 最新版,2013 1 13 更新

    jquery.jeditable 分享

    **jQuery.jeditable 深入解析** `jQuery.jeditable` 是一个强大且灵活的 jQuery 插件,它允许用户在页面上直接编辑文本内容,实现所谓的“就地编辑”(Edit in Place)功能。这种功能在许多现代网页应用中非常常见,...

    开发工具 jquery.dataTables.min

    开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery.hash.min.js 和 jquery.ba-hashchange.min.js

    而 `jquery.hash.min.js` 和 `jquery.ba-hashchange.min.js` 这两个文件则是在 jQuery 基础上扩展了对浏览器 URL hash 变化的处理,从而实现单页面应用(Single Page Application, SPA)中后退和前进按钮的刷新功能...

    jquery.zTree.js.rar

    jquery-1.4.4.min.js jquery.ztree.exhide.min.js jquery.ztree.exedit.min.js jquery.ztree.excheck.min.js jquery.ztree.core.min.js jquery.ztree.all.min.js jquery-1.4.4.js jquery.ztree.exhide.js jquery....

    jQuery.mmenu-jquery.mobile最好看的侧边菜单

    **jQuery.mmenu与jQuery Mobile:打造最佳侧边菜单** jQuery.mmenu是一款强大的JavaScript插件,专为构建响应式、交互式的侧边菜单而设计。它与jQuery Mobile框架结合使用,可以创造出用户界面(UI)中最具吸引力的...

    jquery.tools.min.js 最新的1.2.7版本

    jquery.tools.min.js 最新的1.2.7版本 jquery.min.js是压缩版的jquery库,是由完整版的jQuery库经过压缩得来,压缩后功能与未压缩的完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删除,并进行一些...

    jquery.page.js下载

    《jQuery.page.js 深入解析与应用指南》 在Web开发领域,jQuery以其简洁的API和强大的功能深受开发者喜爱。而当我们谈论`jquery.page.js`时,这是一款基于jQuery的页面滚动插件,旨在为网页添加平滑的滚动效果,...

    jquery.cookie.js,jquery.min.js

    `jquery.min.js`可能是指较新的版本,而`jquery-1.11.0.min.js`是jQuery 1.11.0的压缩版本,它提供了基本的DOM操作和功能,如选择器、事件绑定、动画等。 2. **jQuery Cookie Plugin**: `jquery.cookie.js`是jQuery...

    jQuery.extend和jQuery.fn.extend的区别

    在jQuery的API中,`jQuery.extend`和`jQuery.fn.extend`是两个重要的方法,它们用于合并对象属性,但作用范围和用途有所不同。本文将深入探讨这两个方法的差异,并通过实例解析它们的工作原理。 首先,`jQuery....

    jquery.color.js

    《jQuery.color.js:深入解析jQuery颜色插件》 在JavaScript的世界里,jQuery库以其简洁的API和强大的功能深受开发者喜爱。而jQuery.color.js是jQuery的一个扩展插件,它为jQuery对象添加了对颜色操作的支持,使得...

    jquery.json-2.3.min.js和jquery.json-2.3.js

    jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。

    jquery.slimscroll.min.js

    jquery.slimscroll.min.js下载 jquery.slimscroll.min.js下载

    JQuery颜色渐变插件jquery.color.js

    这正是`jquery.color.js`插件的用途所在。这个插件是专门为了解决jQuery在执行动画时无法平滑过渡颜色这一问题而设计的。 `jquery.color.js`是由John Resig,jQuery的创始人,开发的一个小型插件。它为jQuery添加了...

    jquery.treegrid.min.js

    jquery.treegrid.min.js jquery.treegrid.min.jsjquery.treegrid.min.jsjquery.treegrid.min.js

    jquery.validate 版本大全

    jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....

    jquery.fly.min.js

    jquery.fly.min.js jquery.fly.min.js jquery.fly.min.js jquery.fly.min.js jquery.fly.min.js

    免费jquery.printArea.js下载

    《jQuery.printArea.js:实现高效票据打印的利器》 在当今的Web开发中,与用户交互并提供便捷服务是至关重要的。特别是在商业应用中,打印功能往往不可或缺,尤其是在处理发票、收据等票据打印时。jQuery.printArea...

    jquery.marquee.js官方下载

    《jQuery.marquee.js插件深度解析与应用指南》 在Web开发中,滚动效果常常用于吸引用户的注意力,jQuery.marquee.js就是一款专为实现这种滚动效果而设计的JavaScript插件。该插件基于广泛使用的jQuery库,使得创建...

Global site tag (gtag.js) - Google Analytics