flexgrid的应用

第一、导入必须的CSS与JS：

<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>

在此还可以按钮的样式：

<style>

body
   {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   }
  
.flexigrid div.fbutton .add
   {
    background: url(css/images/add.png) no-repeat center left;
   }

.flexigrid div.fbutton .delete
   {
    background: url(css/images/close.png) no-repeat center left;
   }

</style>

第二、用flexgrid定义一个grid（表格数据可以采用AJAX来异步填充）：

<form id="sform">
<p>
Value 1 : <input type="text" name="val1" value="" autocomplete="off" /><br />
    Value 2 : Is a hidden input with value 3<input type="hidden" name="val2" value="3" /><br />
    Value 3 :
    <select name="val3">
    <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
    </select><br />
    Value 4 : <input type="checkbox" name="val4" id="val4" value="4" /><label for="val4">This will pass a value 4 if checked</label>
    </p>
    <p>
    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
    </p>
   
</form>

<table id="flex1" style="display:none"></table>

<script type="text/javascript">

$("#flex1").flexigrid
    (
    {
    url: 'post3.do',//提交服务器端处理的URL
    dataType: 'json',//定义数据交换格式
    colModel : [ //定义表格列名、宽度、是否居中
     {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
     {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
     {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
     {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
     {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
     ],
    searchitems : [//定义搜索列表（以下拉列表的形式表现）
     {display: 'ISO', name : 'iso'},
     {display: 'Name', name : 'name', isdefault: true}
     ],
    sortname: "iso",//排序列名
    sortorder: "asc",//定义为升序
    usepager: true,//是否分页
    title: 'Countries',//GRID的名称
    useRp: true,//启用分页大小器  
    rp: 15,//每页大小
    showTableToggleBtn: true,//是否显示右上角缩小视窗的按钮  
   width: 700,//grid宽度
    onSubmit: addFormData,//数据传出时调用的函数
    height: 200过//grid高度
    }
    );
function addFormData()
{
var dt = $('#sform').serializeArray();
$("#flex1").flexOptions({params: dt});
return true;
}

$('#sform').submit
(
function ()
   {
    $('#flex1').flexOptions({newp: 1}).flexReload();
    return false;
   }
);

</script>

第三、服务器端处理程序：

StringBuffer jsonStr = new StringBuffer();
jsonStr.append("{\r\n");
   jsonStr.append("page:").append(pageString).append(",\r\n");
   jsonStr.append("total:").append(hpage.getTotalRows()).append(",\r\n");
   jsonStr.append("rows:[\r\n");
   for (Iterator it = list.iterator(); it.hasNext();) {
    YwSalesmain salesmain = (YwSalesmain) it.next();
    jsonStr.append(" {id:'").append(salesmain.getSalesid()).append(
      "',").append("cell:[");
    jsonStr.append("'" + salesmain.getSalesid() + "',");//
    jsonStr.append("'" + nullProcess(salesmain.getPoser()) + "',");//
    jsonStr.append("'" + nullProcess(salesmain.getPosid()) + "',");//
    jsonStr.append("'" + salesmain.getNetamount() + "',");//
    jsonStr.append("'" + nullProcess(salesmain.getMrsaleprice()) + "',");//
    jsonStr.append("'" + salesmain.getAmount() + "'");//
    if (keynum < list.size()) {
     jsonStr.append("]},\r\n");
    } else {
     jsonStr.append("]}\r\n");
    }
    keynum++;
   }
   jsonStr.append(" ]\r\n}");
   PrintWriter out = response.getWriter();
   out.println(jsonStr.toString());
   out.flush();
   out.close();