`
chainhou
  • 浏览: 174988 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery datatable的使用及editable

阅读更多
exoTable = $('#examples').dataTable({ bJQueryUI: true,
								"bServerSide": true,
"sAjaxSource": "XXXX.action?"+"xxx="+params,
							"sPaginationType": "full_numbers",
							[b]"aoColumns": [
              							{  "sName": "XXX",
                           "bSearchable": false,
                           "bSortable": false,
                           "bVisible": false
                               },
			                { "sName": "COMPANY_NAME" },
			                { "sName": "ADDRESS"},
			                { "sName": "TOWN" }][/b]
}).makeEditable({
									sUpdateURL : "XXXX.action?prescCode="+par,
									[b]"aoColumns": [
									              {
									                  //Empty object is used for the default editable settings
									            	  indicator: 'Saving...',
									                  tooltip: 'Click to edit',
									                  loadtext: 'loading...',
									                  type: 'text',
									                  onblur: 'submit'
									              },
									              //null,//null for read-only columns
									               {
									                  //Empty object is used for the default editable settings
									            	  indicator: 'Saving...',
									                  tooltip: 'Click to edit',
									                  loadtext: 'loading...',
									                  type: 'text',
									                  onblur: 'submit'
									              },
									              {
									                  indicator: 'Saving...',
									                  tooltip: 'Click to select town',
									                  loadtext: 'loading...',
									                  type: 'select',
									                  onblur: 'submit',
									                  data: "{'London':'London','Liverpool':'Liverpool'}"
									              }
									            ],[/b]
                             		sAddURL: "XXXX.action",
                             		sAddHttpMethod: "GET",
                                    [color=red]sDeleteHttpMethod: "GET",[/color]

其中加粗的两个column设置,第一个为设置表格中的各列是否可见及其名字,第二项是设置在可编辑状态下展现哪种形式,可以是select,text...


同时,对于editable中如果更改的是汉字,传值时可能出现乱码。所以需要在红色字这一系列URL后加上需要的
fnOnEditing: function(input)
									{ 	
										input.val(encodeURI(input.val()));
										return true;
									},


对修改的值编码,在服务器端,可以用
Map m = ActionContext.getContext().getParameters();
		String[] editedvalue =  (String[]) m.get("value");
		
		String editItem = java.net.URLDecoder.decode(editedvalue[0] , "UTF-8");
进行解码。
分享到:
评论

相关推荐

    editable_datatable:jQuery DataTables的插件以启用内联编辑

    editable_datatable jQuery DataTables的插件以启用内联编辑基本用法 $ ( '#my-table' ) . DataTable ( ) . editable_table ( ) ;选项beforeEditStart 在开始编辑行之前调用了回调。 执行顺序为: 用户单击一行进行...

    jquery-datatables-editable:从 code.google.compjquery-datatables-editable 自动导出

    要使用`jquery-datatables-editable`,首先需要引入jQuery和DataTables库,接着引入`jquery-datatables-editable`的相关文件。通常包括CSS样式文件和JavaScript脚本,如`jquery.dataTables.js`和`jquery.dataTables....

    jquery-datatables-editable:自动从code.google.compjquery-datatables-editable导出

    这个插件是从`code.google.com/p/jquery-datatables-editable`项目自动导出,虽然源代码托管网站已不再更新,但该插件仍被广泛使用。 一、jQuery DataTables 可编辑插件的基本概念 1. 插件集成:`jquery-...

    JQueryDataTable-Servlet:使用java servlet框架实现数据浏览器

    JQueryDataTable-Servlet 基本信息 这是我用来学习Dropwizrd框架的一个小示例应用程序。 它还可以作为项目快速启动和运行。 跑步 现在您可以使用以下命令运行应用程序: mvn clean package -Dmaven.test.skip=true ...

    Jquery Datatables的使用详解

    **jQuery DataTables 使用详解** jQuery DataTables 是一个功能丰富的JavaScript库,它为HTML表格提供了强大的增强功能,包括排序、搜索、分页以及更多的定制化选项。这个插件能够与Bootstrap 3/4、jQuery UI等前端...

    editable-datatable

    jQuery Datatables 可编辑单元格的小要点,无需使用像 Editor 这样的专用 Datatables 插件。 该表已连接到模拟数据服务器。 跟踪每个可编辑的单元格状态,允许跨页面编辑、更新和取消对服务器的更新。 更新: 使可...

    15天学会jQuery.doc

    创建联系表单时,可以使用jQuery验证输入,同时避免使用CAPTCHA: ```javascript $('#contact-form').submit(function(e) { e.preventDefault(); if ($('#email').val() === '') { alert('请输入邮箱地址!'); }...

    自适应PC手机端的jQuery可编辑表格代码.zip

    这些插件通常会扩展jQuery对象的方法,如`$.fn.dataTable`,提供更高级的表格操作。在`index.html`中,通过`<script>`标签引入相应的插件文件,并在JavaScript代码中调用相应的方法来初始化和配置插件。 总结而言,...

    Jquery UI插件,ZinoUI 1.2.3四个颜色主题

    比较好的一个JqueryUI插件。 版本1.2.3 有四个颜色:blue silver dark sky 每个组件的js,css文件可以分开引用,比如你在一个页面中只需要用到进度条,就只需要引用核心文件和进度条css,js 文件就可以了。不需要...

    在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法

    在Bootstrap开发框架中,使用dataTable直接录入表格行数据是一种高效且直观的方式,尤其适用于处理简单业务的明细数据。与传统的弹出窗口录入相比,这种方式在Web应用中提供了更友好的用户体验,增强了数据录入的...

    datatable:一个简单,现代且交互式的网络数据表库

    与大多数数据网格不同,它不需要jQuery。演示版特征电池特性自定义格式化程序内联编辑鼠标选择复制单元格键盘导航自定义单元格编辑器列功能重新排序栏依栏排序删除/隐藏列自定义动作调整栏大小布局灵活行功能行选择...

    可编辑的表格

    例如,可以使用jQuery的`$.ajax()`或基于Promise的`fetch()` API来完成这个任务。 ### 总结 创建可编辑的表格涉及前端UI设计、事件监听、数据处理以及与服务器的通信。HTML5的`contenteditable`属性提供了一种简单...

    bootstrap table实现单击单元格可编辑功能

    <script src="jQuery-2.2.0.min.js"> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap-table-1.11.0/bootstrap-table.js"></script> ...

Global site tag (gtag.js) - Google Analytics