jQuery插件flexigrid使用总结

不是我做的
看看你的mysql的设置，mysql编码问题。

楼主,谢谢您慷慨的回复..
    还有一个问题要请教:返回数据是Jason格式吧,为什么在服务器端没有看见把数据生成Jason格式的代码呢?我看了AllDao、AllAction类，都没有。不知道怎么产生Jason格式数据的。另外，也没有看到将数据传回到客户端的代码，是不是漏了什么文件（比如说Servlet）？
        谢谢！

你可以看看lib包里面有个struts——json（大概这样写的），在action的是type属性里面设置的是json-deafult，这个由对象转json是由struts2默认完成的，不过你可以用printwriter输出流来打印回客户端是一个道理。

楼主，又麻烦你了，呵呵。
有几个问题：
1、只能显示id字段，无法显示其它字段（共3个字段，字段名为id，a，b）。生成json的代码参考网上的，生成的结果格式如下（放在变量 back 中）：
{
page:1,
total:5,
rows:[
{id:'1',cell:['1','1','10']},
{id:'8',cell:['8',' 88',' 88']},
{id:'9',cell:['9','9','2']},
{id:'10',cell:['10','10','1']},
{id:'11',cell:['11','','']}
]}

返回结果的代码如下：
this.out.write(back);
this.out.flush();
this.out.close();

但flexigrid似乎没有收到完整信息，只能显示id字段。

2、在更新、修改和删除时，服务器能接受flexigrid传来的数据，但flexigrid似乎无法收到服务器端发送的数据。具体表现在：更新删除后，flexigrid没有刷新，还是操作之前的样子，是不是服务器端返回代码有误？相关代码见下：

服务器端代码：
this.out.write("success");


flexigrid代码：
$(function() {
    $("#flex").flexigrid({
        url : 'GetData',
        dataType : 'json',
        colModel : [{
            display : 'ID',
            name : 'id',
            width : 50,// 得加上 要不IE报错
            sortable : true,
            align : 'center'
            }, {
            display : 'a',
            name : 'a',
            width : 100,
            sortable : true,
            align : 'center'
            }, {
            display : 'b',
            name : 'b',
            width : 100,
            sortable : true,
            align : 'center'
            }],
        buttons : [{
            name : '添加',
            bclass : 'add',
            onpress : action
            }, {
            // 设置分割线
            separator : true
            }, {
            name : '删除',
            bclass : 'delete',
            onpress : action
            }, {
            separator : true
            }, {
            name : '修改',
            bclass : 'edit',
            onpress : action
            }, {
            separator : true
            }],
//         searchitems : [{
//             display : 'ID',
//             name : 'id',
//             isdefault : true
//             }, {
//             display : '库存',
//             name : 'leavings'
//             }],
        sortname : "id",
        sortorder : "asc",
        usepager : true,
        title : '商品信息',
        useRp : true,
        checkbox : true,// 是否要多选框
        rowId : 'id',// 多选框绑定行的id
        rp : 10,
        showTableToggleBtn : true,
        width : 700,
        height : 263
        });
    var actions="";
    function action(com, grid) {
    switch (com) {
    case '添加' :
    $("#savegoods input[type='text']").each(function() {
        $(this).val("");
        });
     $('#savegoods input[name="id"]').removeAttr("readonly");
     $('#savegoods').attr("action","GetData?action=add");
    actions="GetData?action=add";
    $("#goods").jqmShow();
    break;
    case '修改' :
    selected_count = $('.trSelected', grid).length;
    if (selected_count == 0) {
    alert('请选择一条记录!');
    return;
    }
    if (selected_count > 1) {
    alert('抱歉只能同时修改一条记录!');
    return;
    }
    data = new Array();
    $('.trSelected td', grid).each(function(i) {
        data[i] = $(this).children('div').text();
       
        });
    $('#savegoods input[name="id"]').val(data[0]).attr("readonly","readonly");
    $('#savegoods input[name="a"]').val(data[1]);
    $('#savegoods input[name="b"]').val(data[2]);

   actions="GetData?action=modify";

    $("#goods").jqmShow();
    break;
    case '删除' :
    selected_count = $('.trSelected', grid).length;
    if (selected_count == 0) {
    alert('请选择一条记录!');
    return;
    }
    names = '';
    $('.trSelected td:nth-child(2) div', grid).each(function(i) {
        if (i)
        names += ',';
        names += $(this).text();
        });
    ids = '';
    $('.trSelected td:nth-child(2) div', grid).each(function(i) {
        if (i)
        ids += ',';
        ids += $(this).text();
        })
    if (confirm("确定删除商品[" + names + "]?")) {
    delUser(ids);
    }    
   
    break;
    }
    }
    $("#goods").jqm({

    modal : true,// 限制输入（鼠标点击，按键）的对话
    overlay : 60 // 遮罩程度%

      // }
      }).jqmAddClose('.close')// 添加触发关闭的selector
      .jqDrag('.drag');// 添加拖拽的selector

    function delUser(ids) {
    $.ajax({
        url : 'GetData?action=delete',
        data : {
        ids : ids
        },
        type : 'POST',
        dataType : 'json',
        success : function() {
        $('#flex').flexReload();//表格重载
        }
        });
    }
    $("#submit").click(function(){
    $.ajax({
        url : actions,
        data : $("#savegoods").serialize(),
        type : 'POST',
        dataType : 'json',
        success : function(data) {
    $("#goods").jqmHide();
        $('#flex').flexReload();
        }
        });
    })
    });

你这个不是标准的json格式，不要cell，你这个是官方版本要求的格式，而这个flexigrid版本要求的是另外一种格式，你可以跑下这个例子，用firebug抓下标准的格式。

楼主,你说的果然不错,格式是这样的,方便后来者:
{"page":1,"rows":[{"id":5,"leavings":5,"money":10,"name":"薯条","orders":4,"stand":"每箱28个"},{"id":6,"leavings":6,"money":11,"name":"瓜子","orders":5,"stand":"每箱29个"},{"id":8,"leavings":8,"money":13,"name":"李子","orders":66,"stand":"每箱31个"},{"id":9,"leavings":9,"money":55,"name":"苹果","orders":67,"stand":"每箱32个"},{"id":11,"leavings":11,"money":16,"name":"香蕉","orders":69,"stand":"每箱34个"},{"id":12,"leavings":12,"money":17,"name":"橘子","orders":70,"stand":"每箱35个"},{"id":13,"leavings":13,"money":6,"name":"薯条","orders":0,"stand":"每箱36个"},{"id":15,"leavings":15,"money":8,"name":"牛奶","orders":2,"stand":"每箱38个"},{"id":17,"leavings":17,"money":10,"name":"苹果","orders":4,"stand":"每箱40个"},{"id":18,"leavings":18,"money":11,"name":"奶油","orders":5,"stand":"每箱41个"}],"total":32}


删除\修改\增加,返回值为:
this.out.write("{\"page\":0,\"rows\":null,\"total\":0}");


看来还是strut好用,直接用sevlet烦琐些..

顺便说一句:这种格式每条记录都要给出字段名,重复数据太多,幸好是分页,不然...呵呵

另外,楼主,可以动态增加flexigrid的字段吗?比如表的字段增加了一个,可以动态将新字段显示在flexigrid中吗?

这是神马需求？还没遇见过!

比如,由于需求变化,表增加了一个字段,现在要求将该表所有内容显示.
按上面的flexigrid, test.js中字段都是编码写好了,是硬编码,要满足上面的要求,只能重新该test.js, 能不能通过动态编码,不改test.js文件，能让test.js动态根据表中字段，显示表的全部字段？？

楼主，有好建议吗？