DHTMLX动态提交表格数据

最近做个B2B的项目用到了DHTMLX，想吐槽下。

项目刚启动的时候没有买专业版,那个那个遇到点问题想找点资料那个难啊,主要是因为网上这些高手们的解决方案都是千篇一律,甚至还是错的误导大家。

建议和我一样遇到疑惑的兄弟姐妹们不要去参考网上那些案例了,直接看官方的文档或打开源码看下。

 

下面是我折腾的DHTMLX动态提交表格的实现,仅供参考.

 

需求:实现XXX库存管理,各地级市的库存展示的Grid中,支持新增、修改、删除行

好了,下面就是实现:

   页面需导入的文件：

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>    
<script  src="../../codebase/dhtmlxgridcell.js"></script>
<script  src="../../codebase/dhtmlxdataprocessor.js"></script>

    表格绑定的HTML元素

 <div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>

   相关JS代码

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales, Book Title, Author");
mygrid.setInitWidths("70,250,*");
mygrid.setColAlign("right,left,left");
mygrid.setColTypes("ro,ed,ed");//对单元格ro是只读,ed是可编辑
mygrid.setColSorting("int,str,str");
mygrid.setColumnIds("Sales,Title, Author")//这个属性设置于后台取数据有关,下面会描述
mygrid.init();
mygrid.setSkin("dhx_skyblue");
//下面是加载数据到grid,这个每个人的需求不一样,有的是加载XML,有的是JSON文件，而我需要取到后台
的数据后有选择的取个别字段拼装成数组的形式加载到表格。
var datas = [];
datas[0]=[1,2,3,4,5];//这里我就不把源码全贴出来了,你懂得,应该能看明白。
mygrid.clearAll();
mygrid.parse(datas, "jsarray");

    表格初始化好后就开始关键的动态提交数据的实现了,需要用到组件dhtmlxdataprocessor.js

myDataProcessor = new dataProcessor(URL);//请求的地址,servlet或action或JSP。
//set mode as send-all-by-post;
myDataProcessor .setTransactionMode("POST", true);
myDataProcessor .setUpdateMode("off");//手动提交数据
myDataProcessor .enableDataNames(true);//这个属性与刚表格的setColumnIds配合使用
myDataProcessor .init(myGrid);//注意这一句一定要在表格数据初始化之后,原因是dataProcessor会先记录
//当前表格的状态,举例说如果你在表格数据还没有初始化就执行该行,那么表格中本应该正常初始化的数据它
//会认为是新增的,那么在整个表格提交的时候该行的标示是inserted,造成混乱。
myDataProcessor .sendData();//发送数据

 后台接受请求的部分:

  //获取需要更新或新增的行号
        String ids=context.getRequest().getParameter("ids");
        String goodsNum=context.getRequest().getParameter("goodsNum");
        String[] idArr=ids.split("[,]");
        
        //回执
        StringBuffer sbuff=new StringBuffer();
        sbuff.append("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>");
        sbuff.append("<data>");
        
        
        for (String id : idArr)
        {
            String saleModeNum=context.getRequest().getParameter(id+"_saleModeNum");
//saleModeNum就是在前台setColumnIds指定的列id,如果不指定也行就是默认的数字代替的,那样总结取值
没这么清楚。
            sbuff.append("<action type=\"update\" sid=\"");
//注意:我这里直接写死了是update,其实每行的需要的操作可能不一样
//可以通过String mode = context.getRequest().getParameter(id + "_!nativeeditor_status");来获取
            sbuff.append(id);
            sbuff.append("\" tid=\"").append(id).append("\"/>");

        }
                     
        sbuff.append("</data>");
        
        try
        {
            context.getResponse().setContentType("application/xml");
            context.getResponse().setCharacterEncoding("utf-8");
            context.getResponse().setHeader("Cache-Control", "no-cache");
            PrintWriter out=context.getResponse().getWriter();
            
            out.write(sbuff.toString());
            out.close();//后台数据提交成功后将结果的XML发送到前台就能刷新表格了
        }
        catch (IOException e)
        {
            log.error("response to client ocuur Exception:", e);
        }

   至此表格动态刷新的功能就算完成了,但是这个值能提交表格内的数据,如果要提交表格外的数据只能通过

在

myDataProcessor = new dataProcessor(URL)

 

时拼接在URL后已get的方式提交,中文数据还要做乱码处理,这里有待改进.不过坑爹的不是这里,上面说过了

dataProcessor的初始化在表格数据加载完后,那么就是说get方式提交的数据也就决定了,那么假设我需要将

在表格外页面填写的数据提交到后台这样就不可实现了,坑爹吧！

我的做法是在提交数据前将URL修改下,在dhtmlxDataProcessor.js文件中添加如下方法:

setServerURL:function(url){this.serverProcessor=url;}

 

好了,虽然断断续续的但总算是写完了关键的部分,需要的兄弟可能可以参考下,可能要被人拍砖了,又不能直接复制写了没用是不.呵呵。凑合着看吧