首页 > Dhtmlx > dhtmlxGrid内容实时动态修改

dhtmlxGrid内容实时动态修改

实现的功能

功能:实现grid内容实时动态的修改

用到的技术

1、Dataprocessor和Grid结合
2、Dataprocessor主要API
enableDataNames(true) 这个参数设为true是和Grid的setColumnIds()结合使用的.
setUpdateMode(“off”) 该处设置手动更改数据
setUpdated(row,true) 第二个参数为true则更新选定行的数据,否则为false,不更新数据
sendData() 发送数据到服务器
3、Grid的主要API
事件:
onEditCell(stage,row,cell,newValue,oldValue)
Stage有3个状态,0为编辑前,1为编辑中,2为编辑后
修改数据的实现写在2状态中
服务器响应:
通过dataprocessor的对象绑定onAfterUpdate事件后可以在jsp
页面编写回调函数提示数据修改成功

dp.attachEvent("onAfterUpdate", some_function);
function  some_function(…..){
//代码
}

注意 响应xml的编写格式

<data>
	<action type="my_error" sid="id" tid="id">
		Details
	</action>
</data>
//回调函数参数列表
onAfterUpdate - occurs for each action tag in xml response
-sid 
-action
-tid
-xml node object

具体实现

Action的实现:

public String updateUser() {
	HttpServletResponse respon = ServletActionContext.getResponse();
	HttpServletRequest req = ServletActionContext.getRequest();

	respon.setContentType("text/xml");
	respon.setCharacterEncoding("utf-8");
	respon.setHeader("Cache-Control", "no-cache");
	PrintWriter out = null;

	try {
		out = respon.getWriter();
	} catch (Exception e) {
		e.printStackTrace();
	}
	try {
		String id = req.getParameter("gr_id");
		baseService.saveOrUpdate(userForm);
		StringBuffer sb = new StringBuffer();
		sb.append("<data>").append("<action type='update' sid='")
				.append(id).append("' tid='").append(id).append(
						"'/>1</data>");
		System.out.println(sb.toString());
		out.write(sb.toString());
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
		out.write("0");
	}
	return null;
}

public String listXml() {
	HttpServletResponse respon = ServletActionContext.getResponse();
	respon.setContentType("text/xml");
	respon.setCharacterEncoding("utf-8");
	respon.setHeader("Cache-Control", "no-cache");
	PrintWriter out = null;
	try {
		out = respon.getWriter();
	} catch (Exception e) {
		e.printStackTrace();
	}
	try {
		list = baseService.queryAll(UserForm.class);

	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return "SUCCESS";
}

WEB-INF/下Action名字为user的加一个result

<result name=”SUCCESS”>/159/1/1-3/userDatas.jsp</result>

前台,dataSheetUser.jsp:

//列表数据展示
var grid;
try{
    var grid1;
    var tmpArg = new XGridArgs(700,200,
		"id,用户名,中文名,信息",
		"ro,ed,ed,ed",
		"left,left,left,left",
		"100,100,100,100",false);
	grid = XFactory.Create(GComponents.XGrid,tmpArg);
		grid.bindDIV("gridbox");	  
    	grid.loadXML("<%=basePath%>user!listXml.action");
    	grid1=grid.getInstance();
    	grid1.setColumnIds("userForm.id,userForm.name,userForm.chname");
    var datapro=new dataProcessor("user!updateUser.action");
    	datapro.enableDataNames(true);	  
    	datapro.setUpdateMode("off");//设置手动发送数据
    	datapro.init(grid1);
  	//方法参数 
  	//stage 0 编辑前  1 编辑 2 编辑后
    function doOnEditCell(stage,row,cell,newValue,oldValue){
    	if(stage==2){  //编辑完成后
     		if(newValue!=oldValue){
     			if(confirm("确认修改么?")){
					datapro.setUpdated(row,true);
					datapro.sendData();
					window.setTimeout(500);
				}else{
	    			grid1.cells(row,cell).setValue(oldValue);
				}  
       		}  
    	} 
    }
   grid1.attachEvent("onEditCell",doOnEditCell); 
}catch(ex){
	alert(ex);
}

遇到的问题

1、Dataprocessor的enablePartialDataSend(true)
可以精确到列对数据更新,但是userForm的Id无法传到后台.
解决: url中? 传id
2、代码中Window.setTimeout(500),不延时,后台已更新,但前台未变.
延时后,达到效果.注::
clearAndLoad不使用的情况下也能达到效果

除非注明,文章为IT热血青年原创,欢迎转载!转载请注明本文地址,谢谢。
本文地址:http://blog.itblood.com/the-dhtmlxgrid-content-real-time-changes.html

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.