当前位置: 代码迷 >> Web前端 >> jquery datatable的运用及editable
  详细解决方案

jquery datatable的运用及editable

热度:307   发布时间:2012-08-25 10:06:20.0
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");
进行解码。
  相关解决方案