js表格控件: Sigma Grid

//Sigma
var mygrid=new Sigma.Grid( gridOption );
Sigma.Util.onLoad( Sigma.Grid.render(mygrid) );

Sigma Grid是一个采用纯javascript开发的Ajax数据表格。特性包括：
1.基于CSS控制外观，内置Classic、Vista、Mac、XP四种风格。
2.提供单元格直接编辑功能，可以自定义编辑器，为单元格设置数学计算公式，自定义单元格表现方式。
3.提供灵活的表头控制功能比如：锁定表头，排序，拖动调整列宽。
4.支持分页，数据过滤，根据数据生成柱状图，饼状图，曲线图。
5.支持从多种数据源加载数据： JSON、XML、CSV等。
6.支持多种浏览器：IE6.0+/FireFox2.0+/Safari3.0+/Opera9.0+。
js表格控件: Sigma Grid

主页:http://www.sigmawidgets.com/products/sigma_grid2/

下载:http://www.sigmawidgets.com/download.html

示例:http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

====================================================================================================

Sigma Grid 2.4 探究 2

2011-08-22 14:55:20

标签：休闲 Grid 职场

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://tinyking.blog.51cto.com/3338571/646164

Sigma Grid实例探究

以“example_master_details.html”为例，该实例中应用了两个Grid,一个是父Grid，一个是子Grid，根据点击父grid中的项，子grid联动显示详细信息。

html代码：

先在html中声明两个grid的装载容器

<divid="gridbox"...和 <divid="gridboxDetails"...

<divid="bigbox"style="margin:15px;display:!none;">
<divid="gridbox"style="border:0pxsolid#cccccc;background-color:#f3f3f3;padding:5px;height:200px;width:700px;"></div>
</div>
<divid="bigboxDetails"style="margin:15px;display:!none;">
<divid="gridboxDetails"style="border:0pxsolid#cccccc;background-color:#f3f3f3;padding:5px;height:250px;width:700px;"></div>
</div>

并对父grid进行自定义表头

tableid="myHead"style="display:none">
<tr>
<tdrowspan="2"columnId='chk'resizable='false'>
<inputid="g1_chk"type="checkbox"/></td>
<tdrowspan="2"columnId='no'resizable='false'>OrderNo</td>
<tdrowspan="2"columnId='employee'resizable='false'>Employee</td>
<tdcolspan="7">OrderInfo</td>
</tr>
<tr>
<tdcolumnId='country'>Country</td>
<tdcolumnId='customer'>Customer<imgsrc="./images/customer.gif"/></td>
<tdcolumnId='bill2005'>2005</td>
<tdcolumnId='bill2006'>2006</td>
<tdcolumnId='bill2007'>2007</td>
<tdcolumnId='bill2008'>2008</td>
<tdcolumnId='orderDate'>ShipDate</td>
</tr>
</table>

接下来就在javascript中对两个grid进行定义，并配置其相应的属性。

javas代码：

首先定义两个grid的id变量

vargrid_demo_id="myGrid1";
vargrid_details_id="myGrid2";

构建父grid的数据格式

vardsOption={
fields:[
{name:'no'},
{name:'country'},
{name:'customer'},
{name:'employee'},
{name:'bill2005',type:'float'},
{name:'bill2006',type:'float'},
{name:'bill2007',type:'float'},
{name:'bill2008',type:'float'},
{name:'orderDate',type:'date'}
],
uniqueField:0,
recordType:'object'
}

recordType：Record type. Could be "array" or "object".  构建子grid数据格式

vardsOptionDetails={
fields:[
{name:'no'},
{name:'product'},
{name:'unitPrice',type:'float'},
{name:'quantity',type:'int'},
{name:'discount',type:'float'},
{name:'taxFree',type:'int'},
{name:'taxRate',type:'float'},
{name:'shipTo',type:'int'},
{name:'shipment'},
{name:'note'},
{name:'tax',type:'float',initValue:function(record){
varavg=record[5]*record[6];
returnavg.toFixed(2);
}},
{name:'totalPrice',type:'float',initValue:function(record){
varavg=record[2]*record[3]*record[4]*record[5]*record[6];
returnavg.toFixed(2);
}}
],
recordType:'array'
}

定义计算公式，并显示计算结果
initValue:function(record){
varavg=record[5]*record[6];
returnavg.toFixed(2);
}}

配置父grid属性

varcolsOption=[
{id:'chk',isCheckColumn:true,filterable:false,exportable:false},
{id:'no',header:"OrderNo",width:60},
{id:'employee',header:"Employee",width:80},
{id:'country',header:"Country",width:70},
{id:'customer',header:"Customer",width:80},
{id:'bill2005',header:"2005",width:60,inChart:true,chartColor:'eecc99'},
{id:'bill2006',header:"2006",width:60,inChart:true,chartColor:'66eeaa'},
{id:'bill2007',header:"2007",width:60,inChart:true,chartColor:'d65555'},
{id:'bill2008',header:"2008",width:60,inChart:true,chartColor:'eeaa33'},
{id:'orderDate',header:"DeliveryDate",width:100}
];

isCheckColumn: 是否为选择列  
filterable: 是否可过滤 
exportable:是否可导出 
inChart:在chart中显示 
chartColor: 在chart中显示的颜色

配置子grid属性

varcolsOptionDetails=[
{id:'no',header:"ItemNo",width:60,editor:{type:"text"},
frozen:true},
{id:'product',header:"Product",width:100,
grouped:true,frozen:true,sortOrder:'asc',
editor:{type:"select",
options:{"Abalone":"Abalone","Amber":"Amber","Amethyst":"Amethyst","Aquamarine":"Aquamarine",
"Cameos":"Cameos","Citrine":"Citrine","Coral":"Coral","Crystal":"Crystal","CubicZirconia":"CubicZirconia",
"Emerald":"Emerald","Enamel":"Enamel","Garnet":"Garnet","Glass":"Glass","Moissanite":"Moissanite",
"Onyx":"Onyx","Opal":"Opal","Pearl":"Pearl"},defaultText:''}},
{id:'unitPrice',header:"UnitPrice",width:60,
editor:{type:"text",validRule:['R','F']}},
{id:'quantity',header:"Quantity",width:80,
editor:{type:"text",validRule:['R']}},
{id:'discount',header:"Discount",width:100,renderer:example_renderDiscount,
editor:{type:"text",validRule:['R','F']}},
{id:'taxFree',header:"TaxFree",width:60,renderer:example_renderTaxFree},
{id:'taxRate',header:"TaxRate",width:60,
editor:{type:"text",validRule:['R','F']}},
{id:'tax',header:"Tax",width:60},
{id:'totalPrice',header:"TotalPrice",width:60,align:"right"
},
{id:'shipTo',header:"ShipTo",width:100},
{id:'shipment',header:"Shipment",width:100},
{id:'note',header:"Note",width:150}
];

editor：可以编辑此列 {type：类型
options：为下拉列表提供数据
defaultText：默认值
validRule：验证'R' - Required
'N' - Number
'E' - Email
'F' - Float}
frozen：是否锁定此列如果被锁定在拖动滚动条时候此列不会发生变化
sortOrder：排序 asc 或 desc
renderer：渲染效果参数为function(value ,record,colObj,grid,colNo,rowNo)
align：位置

创建Grid对象并输出

varmygrid=newSigma.Grid(gridOption);
varmygridDetails=newSigma.Grid(gridOptionDetails);
Sigma.Util.onLoad(Sigma.Grid.render(mygrid));
Sigma.Util.onLoad(Sigma.Grid.render(mygridDetails));

本文出自 “TinyKing” 博客，请务必保留此出处http://tinyking.blog.51cto.com/3338571/646164

=====================================================================================================

Sigma Grid 表格的研究及使用

|--gt_msg_en.js

这里以master/details和Sigma Grid CRUD为例，说明Sigma Grid的使用方法，各个参数的作用，数据的传输，及数据的保存。

master/details的demo演示页面为example_master_details.html
此demo演示了父子关系的grid。子grid为明细信息，通过鼠标点击父grid的某条记录关联出子grid内容。
下面着重介绍此grid的使用方法：
首先在页面中定义两个grid的位置

Html代码

<divid="bigbox"style="margin:15px;display:!none;">

<divid="gridbox"style="border:0pxsolid#cccccc;background-color:#f3f3f3;padding:5px;height:200px;width:700px;"></div>

</div>

<divid="bigboxDetails"style="margin:15px;display:!none;">

<divid="gridboxDetails"style="border:0pxsolid#cccccc;background-color:#f3f3f3;padding:5px;height:250px;width:700px;"></div>

</div>

自定义grid列头

Html代码

<tableid="myHead"style="display:none">

<tr>

<tdrowspan="2"columnId='chk'resizable='false'>

<inputid="g1_chk"type="checkbox"/></td>

<tdrowspan="2"columnId='no'resizable='false'>OrderNo</td>

<tdrowspan="2"columnId='employee'resizable='false'>Employee</td>

<tdcolspan="7">OrderInfo</td>

</tr>

<tr>

<tdcolumnId='country'>Country</td>

<tdcolumnId='customer'>Customer<imgsrc="./images/customer.gif"/></td>

<tdcolumnId='bill2005'>2005</td>

<tdcolumnId='bill2006'>2006</td>

<tdcolumnId='bill2007'>2007</td>

<tdcolumnId='bill2008'>2008</td>

<tdcolumnId='orderDate'>ShipDate</td>

</tr>

</table>

//定义两个grid

Js代码

vargrid_demo_id="myGrid1";

vargrid_details_id="myGrid2";

构建父grid数据结构

Js代码

vardsOption={

fields:[

{name:'no'},

{name:'country'},

{name:'customer'},

{name:'employee'},

{name:'bill2005',type:'float'},

{name:'bill2006',type:'float'},

{name:'bill2007',type:'float'},

{name:'bill2008',type:'float'},

{name:'orderDate',type:'date'}

],

uniqueField:0,//Itcouldbeuniquefieldnameoruniquefieldindexinfields

recordType:'object'//记录类型只能是：'object'or'array'

}

构建子grid数据结构

Js代码

vardsOptionDetails={

fields:[

{name:'no'},

{name:'product'},

{name:'unitPrice',type:'float'},

{name:'quantity',type:'int'},

{name:'discount',type:'float'},

{name:'taxFree',type:'int'},

{name:'taxRate',type:'float'},

{name:'shipTo',type:'int'},

{name:'shipment'},

{name:'note'},

{name:'tax',type:'float',initValue:function(record){

varavg=record[5]*record[6];

returnavg.toFixed(2);

}},

{name:'totalPrice',type:'float',initValue:function(record){

varavg=record[2]*record[3]*record[4]*record[5]*record[6];

returnavg.toFixed(2);

}}

],

recordType:'array'

}

//渲染成checked.gif

functionexample_renderTaxFree(value,record,columnObj,grid,colNo,rowNo){

if(value==0)return"<imgsrc='./images/unchecked.gif'>";

return"<imgsrc='./images/checked.gif'>";

}

//渲染成星星 five_star

Js代码

functionexample_renderDiscount(value,record,columnObj,grid,colNo,rowNo){

vari=Math.round(value/0.4*5);

if(i>5)i=5;if(i<1)i=1;

return"<IMGSRC=\"./images/five_star"+i+".gif\"/>"

}

构建父grid 列样式
/*
isCheckColumn:选项列
filterable：是否可以过滤此列
exportable：输出表格
id：id
header：显示的名称
width:宽度
inChart：是否在图表中统计
chartColor：图表颜色
*/

Js代码

varcolsOption=[

{id:'chk',isCheckColumn:true,filterable:false,exportable:false},

{id:'no',header:"OrderNo",width:60},

{id:'employee',header:"Employee",width:80},

{id:'country',header:"Country",width:70},

{id:'customer',header:"Customer",width:80},

{id:'bill2005',header:"2005",width:60,inChart:true,chartColor:'eecc99'},

{id:'bill2006',header:"2006",width:60,inChart:true,chartColor:'66eeaa'},

{id:'bill2007',header:"2007",width:60,inChart:true,chartColor:'d65555'},

{id:'bill2008',header:"2008",width:60,inChart:true,chartColor:'eeaa33'},

{id:'orderDate',header:"DeliveryDate",width:100}

];

构建子grid 列样式
/*

editor：可以编辑此列 {type：类型
options：为下拉列表提供数据
defaultText：默认值
validRule：验证'R' - Required
'N' - Number
'E' - Email
'F' - Float}
frozen：是否锁定此列如果被锁定在拖动滚动条时候此列不会发生变化
sortOrder：排序 asc 或 desc
renderer：渲染效果参数为function(value ,record,colObj,grid,colNo,rowNo)
align：位置

*/

Js代码

varcolsOptionDetails=[

{id:'no',header:"ItemNo",width:60,editor:{type:"text"},

frozen:true},

{id:'product',header:"Product",width:100,

grouped:true,frozen:true,sortOrder:'asc',

editor:{type:"select",

options:{"Abalone":"Abalone","Amber":"Amber","Amethyst":"Amethyst","Aquamarine":"Aquamarine",

"Cameos":"Cameos","Citrine":"Citrine","Coral":"Coral","Crystal":"Crystal","CubicZirconia":"CubicZirconia",

"Emerald":"Emerald","Enamel":"Enamel","Garnet":"Garnet","Glass":"Glass","Moissanite":"Moissanite",

"Onyx":"Onyx","Opal":"Opal","Pearl":"Pearl"},defaultText:''}},

{id:'unitPrice',header:"UnitPrice",width:60,

editor:{type:"text",validRule:['R','F']}},

{id:'quantity',header:"Quantity",width:80,

editor:{type:"text",validRule:['R']}},

{id:'discount',header:"Discount",width:100,renderer:example_renderDiscount,

editor:{type:"text",validRule:['R','F']}},

{id:'taxFree',header:"TaxFree",width:60,renderer:example_renderTaxFree},

{id:'taxRate',header:"TaxRate",width:60,

editor:{type:"text",validRule:['R','F']}},

{id:'tax',header:"Tax",width:60},

{id:'totalPrice',header:"TotalPrice",width:60,align:"right"

},

{id:'shipTo',header:"ShipTo",width:100},

{id:'shipment',header:"Shipment",width:100},

{id:'note',header:"Note",width:150}

];

父grid属性
/*
width:宽度
height：高度
container：grid创建的位置
dataset：数据
columns：列样式
pageSizeList：页面显示条数
customHead：自定义grid头
onClickCell：点击触发事件
SigmaGridPath：未知
loadURL：获取数据地址
exportURL：输出地址用于输出EXCEL XML CSV PDF
exportFileName：输出名称
remotePaging:指定服务器端不分页工作
defaultRecord：当点击添加按钮时默认的加入一行的数据
pageSize：页面显示记录数
toolbarContent：grid 工具条{
nav goto - 分页
pagesize - 显示记录数
reload - 刷新
print - 打印
csv - 输出CSV格式文件
xls - 输出xls格式文件
pdf - 输出pdf格式文件
filter - 过滤查询
chart - 图表
state - 状态
}
*/

Js代码

vargridOption={

id:grid_demo_id,

width:"700",

height:"350",

container:'gridbox',

replaceContainer:true,

dataset:dsOption,

columns:colsOption,

pageSizeList:[5,10,15,20],

customHead:'myHead',

onClickCell:function(value,record,cell,row,colNO,rowNO,columnObj,grid){

varno=record["no"]>"070-19"?"070-19":record["no"];

vargrid=Sigma.$grid(grid_details_id);

grid.loadURL="./data/"+no+".js";

grid.reload();

},

SigmaGridPath:'../grid/',

loadURL:'test.jsp?actionMethod=list',

saveURL:'test.jsp?actionMethod=save',

exportURL:'./export_php/testMasterList.php?export=true',

exportFileName:'SalesMasterReport',

remotePaging:false,

defaultRecord:["","","","",0,0,0,0,"2008-01-01"],

pageSize:20,

toolbarContent:'navgoto|pagesize|reload|printcsvxlsxmlpdffilterchart|state'

};

子grid属性
/*
editable:表格是否可编辑
groupable：true分组菜单将会出现在主菜单中，并且启动分组功能
clickStartEdit:点击鼠标出发编辑事件
showGridMenu:是否显示主菜单
allowCustomSkin：是否制定skin出现在菜单上
allowFreeze：是否被冻结栏出现在主菜单
allowHide：隐藏是否出现在主菜单
allowGroup：组是否出现在主菜单

*/

Js代码

vargridOptionDetails={

id:grid_details_id,

loadUrl:'./data/010-0.js',

saveURL:'test.jsp?actionMethod=save',

width:"700",

height:"260",

container:'gridboxDetails',

replaceContainer:true,

editable:true,

groupable:true,

pageSizeList:[5,10,15,20],

dataset:dsOptionDetails,

columns:colsOptionDetails,

clickStartEdit:true,

defaultRecord:["","",0,0,0.0,0,0.0,"Customer","UPS",""],

pageSize:30,

toolbarContent:'reload|adddelsave|print|state',

showGridMenu:true,

allowCustomSkin:true,

allowFreeze:true,

allowHide:true,

allowGroup:true,

customRowAttribute:function(record,rn,grid){

if(record[11]>80){

return'';

}

}

};

创建Grid对象并输出

Js代码

varmygrid=newSigma.Grid(gridOption);

varmygridDetails=newSigma.Grid(gridOptionDetails);

Sigma.Util.onLoad(Sigma.Grid.render(mygrid));

Sigma.Util.onLoad(Sigma.Grid.render(mygridDetails));

Sigma Grid CRUD的demo演示页面为list1.jsp
此例子用来说明前后台的数据交互及grid的增删改查及保存功能

获取数据属性：
loadURL
保存数据属性：
saveURL

例：
loadURL : APP_PATH+'/views/controller.jsp?actionMethod=list'
saveURL : APP_PATH+'/views/controller.jsp?actionMethod=save'

这里为了实现功能效果只简单的使用jsp直接访问数据库实现查询CRUD的工作。
当然也使用MVC结构来实现，只要返回的数据类型是JOSN并且符合Sigma Grid的数据格式即可
controller.jsp

Java代码

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>

<%@pageimport="java.sql.*,java.util.*"%>

<%@pageimport="com.fins.gt.server.*"%>

<%!

ConnectiongetConnection(){

Stringurl="jdbc:mysql://localhost:3306/sigma_grid_server";

Connectionconn=null;

try{

Class.forName("com.mysql.jdbc.Driver").newInstance();

conn=DriverManager.getConnection(url,"root","");

}catch(Exceptione){

}

returnconn;

}

voidcloseConnection(Connectionconn){

try{

conn.close();

}catch(Exceptione){

}

}

ListlistOrders(){

Connectionconn=getConnection();

if(conn==null)

returnnewArrayList();

Statementstmt=null;

ResultSetrs=null;

Listlist=newArrayList();

try{

stmt=conn.createStatement();

rs=stmt.executeQuery("select*fromorders");

while(rs.next()){

Mapmap=newHashMap();

map.put("order_no",newLong(rs.getLong("order_no")));

map.put("employee",rs.getString("employee"));

map.put("country",rs.getString("country"));

map.put("customer",rs.getString("customer"));

map.put("order2005",newFloat(rs.getFloat("order2005")));

map.put("order2006",newFloat(rs.getFloat("order2006")));

map.put("order2007",newFloat(rs.getFloat("order2007")));

map.put("order2008",newFloat(rs.getFloat("order2008")));

map.put("delivery_date",rs.getString("delivery_date"));

list.add(map);

}

rs.close();

stmt.close();

}catch(Exceptione){

}

closeConnection(conn);

returnlist;

}

int[]insertOrders(ListupdatedList){

int[]opresults=null;

Stringsql="INSERTINTOorders(employee,country,customer,order2005,order2006,order2007,order2008,delivery_date)VALUES(?,?,?,?,?,?,?,?)";

Connectionconn=null;

PreparedStatementpstmt=null;

try{

conn=getConnection();

pstmt=conn.prepareStatement(sql);

for(inti=;i<updatedList.size();i++){

Maprecord=(Map)updatedList.get(i);

pstmt.setString(1,String.valueOf(record.get("employee")));

pstmt.setString(2,String.valueOf(record.get("country")));

pstmt.setString(3,String.valueOf(record.get("customer")));

pstmt.setString(4,String.valueOf(record.get("order2005")));

pstmt.setString(5,String.valueOf(record.get("order2006")));

pstmt.setString(6,String.valueOf(record.get("order2007")));

pstmt.setString(7,String.valueOf(record.get("order2008")));

pstmt.setString(8,String.valueOf(record.get("delivery_date")));

pstmt.addBatch();

}

opresults=pstmt.executeBatch();

}catch(SQLExceptione){

opresults=null;

}finally{

closeConnection(conn);

}

returnopresults;

}

int[]updateOrders(ListupdatedList){

int[]opresults=null;

Stringsql="UPDATEordersSETcustomer=?,order2008=?,delivery_date=?WHEREorder_no=?";

Connectionconn=null;

PreparedStatementpstmt=null;

try{

conn=getConnection();

pstmt=conn.prepareStatement(sql);

for(inti=;i<updatedList.size();i++){

Maprecord=(Map)updatedList.get(i);

pstmt.setString(1,String.valueOf(record.get("customer")));

pstmt.setString(2,String.valueOf(record.get("order2008")));

pstmt.setString(3,String.valueOf(record.get("delivery_date")));

pstmt.setString(4,String.valueOf(record.get("order_no")));

pstmt.addBatch();

}

opresults=pstmt.executeBatch();

}catch(SQLExceptione){

opresults=null;

}finally{

closeConnection(conn);

}

returnopresults;

}

int[]deleteOrders(ListupdatedList){

int[]opresults=null;

Stringsql="DELETEFROMordersWHEREorder_no=?";

Connectionconn=null;

PreparedStatementpstmt=null;

try{

conn=getConnection();

pstmt=conn.prepareStatement(sql);

for(inti=;i<updatedList.size();i++){

Maprecord=(Map)updatedList.get(i);

pstmt.setString(1,String.valueOf(record.get("order_no")));

pstmt.addBatch();

}

opresults=pstmt.executeBatch();

}catch(SQLExceptione){

opresults=null;

}finally{

closeConnection(conn);

}

returnopresults;

}

booleansaveOrders(ListinsertedRecords,ListupdatedList,ListdeletedRecords){

//youcancontroltransaction,commit,rollbackhere

int[]insertCodes=insertOrders(insertedRecords);

int[]updateCodes=updateOrders(updatedList);

int[]deleteCodes=deleteOrders(deletedRecords);

booleansuccess=insertCodes!=null&&updateCodes!=null&&deleteCodes!=null;

returnsuccess;

}

%>

<%

//GridServerHandlerisserversidewrapper,youcangetalltheinfopostedtoserverinyourJavawayinsteadofJavaScript

GridServerHandlergridServerHandler=newGridServerHandler(request,response);

Stringoperation=request.getParameter("actionMethod");

if("save".equals(operation)){

System.out.println("----save-----");

booleansuccess=true;

//取得新增的数据集合,每条数据记录在map里

ListinsertedRecords=gridServerHandler.getInsertedRecords();

//取得修改的数据集合,每条数据记录在map里

ListupdatedList=gridServerHandler.getUpdatedRecords();

//取得删除的数据集合,每条数据记录在map里

ListdeletedRecords=gridServerHandler.getDeletedRecords();

//如果希望取得bean的集合那么请使用有参方法:xxx.getXXXXXXRecords(ClassbeanClass);

//例如:ListupdateList=gridServerHandler.getUpdatedRecords(StudentVO.class);

//调用"相应的方法"来updatedeleteinsert数据

success=saveOrders(insertedRecords,updatedList,deletedRecords);

//设置该次操作是否成功.

gridServerHandler.setSuccess(success);

//如果操作不成功你也可以自定义一些异常信息发送给客户端.

//gridServerHandler.setSuccess(false);

//gridServerHandler.setException("...exceptioninfo...");

//向客户端输出json字符串.

out.print(gridServerHandler.getSaveResponseText());

}else{//clientisretrievingdata

Listlist=listOrders();

System.out.println("----list-----");

inttotalRowNum=list.size();

//取得总记录数

gridServerHandler.setTotalRowNum(totalRowNum);

//调用"相应的方法"来取得数据.下面4个方法通常对于进行分页查询很有帮助,根据需要使用即可.

//gridServerHandler.getStartRowNum()当前页起始行号

//gridServerHandler.getEndRowNum()当前页结束行号

//gridServerHandler.getPageSize()每页大小

//gridServerHandler.getTotalRowNum()记录总条数

//本例中list里的元素是map,

//如果元素是bean,请使用gridServerHelp.setData(list,BeanClass.class);

gridServerHandler.setData(list);

//gridServerHandler.setException("yourexceptionmessage");

//向客户端输出json字符串.

out.print(gridServerHandler.getLoadResponseText());

System.out.print(gridServerHandler.getLoadResponseText());

//你也可以使用gridServerHandler.getLoadResponseText()来取得字符串.

//然后自行向客户端输出,这样做的好处是你可以自己来决定response的contentType和编码.

}

%>

通过上面的代码可以看出操作grid的对象是GridServerHandler
使用GridServerHandler对象，来操作grid中的数据。

上传了demo，部署后访问demo地址为：
http://localhost:8080/GtGridDemo/views/demo1.jsp
.................................................................demo2.html
.................................................................demo3.jsp
.................................................................demo4.html
.................................................................demo5.html
通过以上demo实现以下功能
简单载入一个结果集（select top 20 * from Orders），主要展示以下特点(如何load数据，如何锁定表头列头，跨列表头如何设定，如何设定客户端按列排序)
带2个条件查询Orders表（如何传入查询条件查询），
主从表的载入（orders, Order Details）
可以的编辑单表Grid（单元格的编辑框如何定义，如何add和delete一行，编辑后的数据如何提交给jsp）
可以的编辑主从表Grid（重点体现子表如何编辑，并保持主记录和子记录的关系，编辑后的数据如何提交给jsp）
打印功能的实现(pdf，excel，)

js表格控件: Sigma Grid

Sigma Grid 表格的研究及使用

相关推荐