文档章节

  jQuery插件——x-editable表单字段实时编辑)--select2

chenyansong22
 chenyansong22
发布于 2015/10/17 14:08
字数 385
阅读 124
收藏 0
  1. 效果图


  2. 制作步骤

    1. jsp 代码如下

             

 //这是生成一个datatable时的jsp 片段:
 {title:"栏目", "data": "dirName",render:function(data,tpye,row){
                        return '<a href="#" id="dirName" data-placement="left" data-type="select2"  data-value="'+data+'"  data-title="请选择栏目">'+data+'</a>';
                    }
                },
 以上参数,详见上图中的说明

    2.二)  下面是datatable中初始化过程中一行创建完毕时,执行的回调函数,在回调函数中初始化 editable

"createdRow": function ( row, data, index ) {//将序号赋值给第二列
                     $('td', row).eq(1).html((this.dataTableSettings[0]._iDisplayStart+index+1));//eq(1)指每行第二列
                     var resourceid = data.resourceid;
                     // $('a', row).eq(1) 拿到的是 :页面中的a标签对象,并对其中的保存方法进行重写
                     //这个方法请参看上图中的截图2
                     $('a', row).eq(1).on('save', function(e, params) {
                            var url = "<%=baseURL %>/kfarticle/moveArticleDir.action";
                            var data = {"id":resourceid,"dirCodeMove":params.newValue} ;
                            $.ajax({
                                type: "POST",             
                                dataType:"json",
                                url:url,//"/portal/demo/del.action",
                                data:data,
                                success:function(data){                 
                                    parent.messager(1, 0, data.msg, '提示');
                                    //刷新datatable 
                                    ev_tbreload();
                                    
                                },
                                error: function(data){
                                    parent.messager(3, 0, data.msg, '提示');
                                    return false;
                                }
                            });
                            
                            console.log(e);
                        });
                    //初始化editable
                      $('a', row).eq(1).editable({
                            //保存编辑的数据的时候,用于提交的URL
                            url: '<%=baseURL %>/kfarticle/moveArticleDir.action', 
                            //用于请求json数据(这些数据可以用来填充select 的value name) 
                            source: '<%=baseURL %>/kfarticle/listTree.action?xedit=true',
                            select2: {//用于生成select下拉框
                                width: 200,//生成的select的下拉框的宽度
                                placeholder: '请选择栏目',//生成select的title
                                allowClear: true,
                            },
                            //保存编辑的数据的时候,用于提交的数据
                            params:function(params) {
                                console.log(params);
                                params={"id":params.value,"dirCodeMove":"1"};
                                return params;
                            },
                            
                        });

                },



© 著作权归作者所有

chenyansong22
粉丝 0
博文 45
码字总数 13731
作品 0
广州
私信 提问
可考虑在你下一个项目中使用的 50 个 Bootstrap 插件

可考虑在你下一个项目中使用的 50 个 Bootstrap 插件 作者 jopen 2014-11-12 09:54:16 阅读目录 1. Bootstrap Multiselect 2. Bootstrap Dialog 3. Bootstrap Confirmation 4. Bootstrap Ta......

~少司命~
2015/08/17
3.5K
0
20 个增强表单功能的 jQuery 插件

1) jQtransform jQuery Plugin 对表单进行外观美化的插件 2) Live Validation LiveValidation 是一个轻量的表单验证库。除了传统的验证功能,还提供实时验证,可以一边输入一遍验证。Ruby on...

红薯
2012/02/15
3.3K
2
兼容jQuery 1.3 -- jQuery UI 1.6rc5 发布

jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、...

红薯
2009/01/17
499
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
9.3K
6
20个jQuery插件,帮你打造完美网页表单

网页表单主要是用来从用户那里收集一些必要的信息,是网页设计中不可或缺的一环。一个设计良好的表单能更有效的获取用户信息,也会给用户带来更好地使用体 验。基于这一点,很多设计师开始使...

鉴客
2012/03/31
5K
13

没有更多内容

加载失败,请刷新页面

加载更多

DRF 获取DefaultRouter 对应的url

命令 python manage.py show_urls urls.py from user.router import core_routerurlpatterns = [ path('user/login/', views.LoginView.as_view(), name='login'), path('user/log......

hyhlinux
31分钟前
3
0
uniapp登录流程详解uni.login

uni.login(OBJECT) 登录 H5平台登陆注意事项: 微信内嵌浏览器运行H5版时,可通过js sdk实现微信登陆,需要引入一个单独的js,详见 普通浏览器上实现微信登陆,并非开放API,需要向微信申请,...

达达前端小酒馆
31分钟前
3
0
目标检测中 yolo 的mAP是什么含义?

mAP定义及相关概念 P => precision,即 准确率 R => recall,即 召回率 PR曲线 = >即 以 precision 和 recall 作为 纵、横轴坐标 的二维曲线。一般来说,precision 和 recall 是 鱼与熊掌 的...

小松1
35分钟前
4
0
用jdk1.8的断言来做非空判断

Assert.notNull(user, "没有获得登录用户信息"); 看源码如下: public static void notNull(Object object, String message) { if (object == null) { throw new IllegalArgum......

architect刘源源
40分钟前
6
0
2018NOIP各省一等奖分数线

提高组 普及组

SamXIAO
52分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部