今天玩了玩jqGrid,贴点代码出来,以后方便copy
jqGrid 编辑模式,如果想要编辑,切记cellEdit地方的设置,少了这个,表格死也不能编辑,害老夫郁闷了很久:
jQuery("#table").jqGrid({
datatype: "json",
width:1019,
colNames:['编号','名称'],
colModel:[
{name:'no',index:'no', width:15, editable:false},
{name:'name',index:'name', width:15, sortable:false,editable: true}
],
multiselect: false,
cellEdit:true,
cellsubmit:"clientArray",
caption: "数据列表" ,
onSelectRow: function(ids) {
s=ids;
}
});
按钮提交上面这个表单的时候,
注意使用POST,GET如果参数过长会被截掉。
取得JQGRID中所有数据的代码:
function getFormJosn(){
var tmp=[];
var Data="";
$("#table>tbody>tr").each(function (){
tmp[this.id] = "{'no':'"+$("#table").getRowData(this.id).no+"',";
tmp[this.id] += "'name':'"+$("#table").getRowData(this.id).name+"'}";
});
for(var n =0;n<tmp.length;n++){
Data+=tmp[n];
Data+=",";
}
return {'Data':Data};
}
ajax 将上面的数据传入后台进行业务处理
//保存
$("#doSave").click(function(){
var Data="";
Data= getFormJosn();
$.ajax({
type: 'POST',
url:"xxxx.action?doSave",
data: Data,
success:function(data){
alert("over");
}
});
});
在补充个JSON互转的代码
public class JsonProvider {
public static String writeToString(Object object){
String result ="";
try {
ObjectMapper m = new ObjectMapper();
result =m.writeValueAsString(object);
} catch (JsonGenerationException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (JsonMappingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return result ;
}
public static TypeData fromJSON(String json, TypeData clazz) {
ObjectMapper mapper = new ObjectMapper();
try {
clazz= mapper.readValue(json, TypeData.class);
} catch (JsonGenerationException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (JsonMappingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return clazz;
}
public static void main(String[] args) {
//resolveJson();
String json="{\"name\":\"张三\",\"年龄\":\"15\"}";
fromJSON(json,new TypeData());
}
}
分享到:
相关推荐
在`JqGrid Demo json`中,JSON(JavaScript Object Notation)作为数据交换格式,被用于从服务器向客户端传递结构化数据。JSON因其轻量级、易于阅读和编写的特点,成为了Web服务和浏览器之间传输数据的首选格式。 ...
jqGrid支持多种数据源,包括JSON、XML、CSV等,能与服务器进行异步通信,实现Ajax的数据加载。此外,它还支持自定义列、主题、多级表头等,为网页界面设计提供了极大的便利。 3. **标签页Iframe**: 在Web开发中,...
在与服务器交互时,jqGrid通常通过Ajax请求获取JSON格式的服务器数据。当JSON数据中包含特殊字符,例如回车符(\n)、制表符(\t)、引号(")等,它们可能会影响JSON的解析和jqGrid的渲染。 传统的处理方式是手动...
### JSON(JavaScript Object Notation) JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它是互联网上应用最广泛的数据交换格式之一。在jqGrid中,服务器返回的数据通常以JSON格式...
在JavaScript中初始化jqGrid,设置其AJAX请求参数,如datatype(通常设为'json'),并注册事件处理函数,如排序、编辑等。 5. **处理前端交互**:利用jqGrid提供的API,可以轻松实现前端的交互功能,如点击行触发...
3. **JSON数据交换**:jqGrid与服务器通信通常采用JSON(JavaScript Object Notation)格式,这是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在Servlet中,你可以使用诸如`org.json`库...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于前后端数据交互。在描述的场景中,“json嵌套list”指的是JSON对象中包含一个或多个列表(数组)的情况,这种结构允许我们存储复杂的数据集合...
jqGrid通过Ajax请求发送JSON或XML格式的数据。例如,Servlet可能会接收查询参数,查询数据库,然后返回JSON数据: ```java protected void doPost(HttpServletRequest request, HttpServletResponse response) ...
jqGrid通过Ajax方式访问这个URL来自动获取可选项。需要注意的是,返回的数据格式应为`<select><option value="1">One</option><option value="2">Two</option></select>`这种结构,或者可以使用`buildSelect`属性...
这通常涉及到JSON数据的序列化和反序列化,CXF提供了自动处理JSON的能力,而jqGrid则可以直接处理返回的JSON数据并更新表格。 8. **安全与认证**: 考虑到这是一个涉及数据操作的项目,可能还需要实现用户认证和...
jqGrid支持JSON和XML两种数据格式,这两种格式都是数据交换的常用标准,尤其是对于Web服务和AJAX通信。 **分页** 是jqGrid的一个核心特性,它可以自动处理大量数据的显示,只加载用户当前查看的部分数据,提高了...
jqGrid是一款功能强大的JavaScript表格插件,用于在Web应用中展示和操作数据。它支持网格布局,提供了分页、排序、过滤、编辑等丰富的功能,是前端开发中处理表格数据的常用工具。在这个主题中,我们将探讨如何使用...
当在`searchoptions`或`editoptions`属性中设置`dataUrl`时,jqGrid将通过Ajax访问该URL以自动获取`select`下拉框的内容。返回结果应该为包含`<option>`标签的HTML字符串,或者键值对形式的数据,在这种情况下需要...
2. **ajaxSelectOptions** (object): 当searchoptions或editoptions选项中设置dataUrl时,jqGrid会使用此属性设置select元素的Ajax请求配置,用于动态获取下拉框的选项。返回的数据格式应符合HTML的select结构,或以...
3. **JSON(JavaScript Object Notation)**:是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在ASP.NET中,通常使用JSON作为服务器向客户端传输数据的方式,尤其是对于异步请求(AJAX)...
jQuery使得开发者能够以简洁、直观的API来操作DOM(Document Object Model),创建动态网页。 JSP(JavaServer Pages)中的jqGrid是一个功能强大的基于jQuery的数据网格插件,专门用于展示和操作表格数据。它提供了...
public ResponsePojo export(@RequestBody Map, Object> params) { // 其他业务逻辑代码... } ``` 这段代码使用了Spring MVC的`@ResponseBody`注解和`@RequestMapping`注解,表明该方法会处理`/export`路径的POST...
JavaScript API 提供了XMLHttpRequest对象用于实现异步通信,通常结合JSON格式数据进行传输。 5. **jQuery** jQuery 是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery...