dhtmlxGrid：
链接 Samples： http://www.dhtmlx.com/docs/products/docsExplorer/samples.shtml
链接 Docs： http://docs.dhtmlx.com/doku.php
dhx_js：
var layout,menu,toolbar,mygrid
dhtmlx.image_path = "dhtmlx_std_full/imgs/";
layout = new dhtmlXLayoutObject("parentId","1C", "dhx_skyblue"); //2U,1C,light
layout.cells("a").setText("XX管理");
toolbar = layout.attachToolbar();
toolbar.setIconsPath("icons/");
toolbar.loadXML("xml/toolbar.xml");
menu = new dhtmlXMenuObject();
menu.setIconsPath("dhtmlx_std_full/imgs/");
menu.renderAsContextMenu();//快捷菜单
menu.attachEvent("onClick", onButtonClick);
menu.loadXML("dhtmlx_extra/_context.xml");
//mygrid = new dhtmlXGridObject('gridbox');
mygrid = layout.cells("a").attachGrid();
mygrid.setSkin("dhx_skyblue");
//如果后台返回过来的数据是有为dhtmlxGrid作格式适应处理的，则Header各列的数据会根据Header的顺序自动加载进Grid中
mygrid.setHeader(" ,#master_checkbox,XX,XX,XX,XX,XX");// 代表列标题为空，#master_checkbox代表列标题为box
mygrid.setHeader("Sales,img:[../common/images/books.gif]Book Title,Author,img:[../common/images/book.gif]");//在标题栏添加图片
//如果后台返回过来的数据没有为dhtmlxGrid作格式适应处理，只是普通json对象的，则通过setColumnIds方法，按照id加载进Grid中
mygrid.setColumnIds("status,name,code,orderIndex");//[sets id to every column. Can be used then to retreive the index of the desired colum ]
mygrid.setInitWidths("40,60,60,150,60,90,60,90,90,180,90,90,90");//如果没有设置Width则标题自动适应窗口
mygrid.setColAlign("center,center,center,center,center");
mygrid.setColTypes("cntr,ch,ed,clist,ed,coro,dhxCalendar,txt,link,acheck");//注：各种数据格式！
mygrid.setColSorting("na,str,int,str,date"); //排序：'str','int','date'
mygrid.attachHeader(" ,#text_filter,#combo_filter,#cspan, ");//筛选,空筛选,下拉筛选
/* 多行标题
mygrid.setHeader("Sales,Book,#cspan,Price,In Store,Shipping,Other Info,#cspan");//第一行标题
mygrid.attachHeader(["#rspan", "Title", "Author", "#rspan", "#rspan", "#rspan", "Bestseller", "Published"]);//第二行标题
*/
mygrid.enableSmartRendering(true);//dynamical loading of rows from server
mygrid.attachFooter();//grid底部添加行
mygrid.enableAutoHeight(true,600);
mygrid.enableAutoWidth(true,800);
mygrid.setDateFormat("%Y-%m-%d")//专业版
mygrid.registerCList(6, ["Stephen King", "John Grisham", "Honore de Balzac"]);//专业版
mygrid.setColumnColor("#CCE2FE");//首列（计数）颜色
mygrid.enableBlockSelection();//块级选择
mygrid.enableContextMenu(menu);//右键选择颜色
mygrid.enableMultiselect(true);//mygrid.selMultiRows = true;//多行选择
mygrid.setMultiLine(false);
mygrid.enableDragAndDrop(true);//允许拖拉
mygrid.enableEditEvents(false, true, true);//enableEditEvents(click, dblclick, f2Key)
mygrid.enablePaging(true, 10, 3, "pagingArea", true, "recinfoArea");//grid分页功能（专业版）
mygrid.xmlFileUrl=url;//真分页
mygrid.setColumnColor("#d5f1ff,white,#d5f1ff,#d5f1ff");//设置列（前3列）颜色
mygrid.enableColumnAutoSize(true);//允许调整列宽度
mygrid.adjustColumnSize(2)//调整列宽度
mygrid.enableTooltips("false,true,true,true,true");//设置提示
mygrid.attachEvent("onBeforeContextMenu", my_pre_func);//限定快捷菜单的列
mygrid.attachEvent("onRightClick", onRightClick);//右键事件
mygrid.attachEvent("onEditCell",doOnEditCell);
mygrid.getCombo(7).put(1, "不重要")
mygrid.getCombo(7).put(2, "一般重要")
mygrid.getCombo(7).put(3, "一般重要")
/*
mygrid.groupBy(2);//行按第3列的属性分组（从0计数）
mygrid.unGroup();//取消行分组
mygrid.expandAllGroups()//展开行分组
mygrid.collapseAllGroups()//合并行分组
if (mygrid.getSelectedId()) mygrid.deleteRow(mygrid.getSelectedId())//删除选中行
mygrid.addRow(new_id, text, index)//在末尾添加行：
mygrid.customGroupFormat = function(text, count) {
return "Grouped by " + text + ", there are " + count + " related records";
};//自定义行分组的分组头的格式
mygrid.filterBy(cellId, text);//根据内容筛选
mygrid.filterBy(0,function(a){ return (a<500);});//根据ID筛选前500条
mygrid.splitAt(3);//冻结列
*/
/*
mygrid.enableHeaderMenu();//允许标题栏隐藏
mygrid.setColumnHidden(2, true);
*/
/*
mygrid.setColTypes("ed,ed,price,ed,ed[=c2*c3]");//数学计算
mygrid.setColSorting("str,str,int,int,int");
mygrid.setMathRound(2);
mygrid.enableMathEditing(true);
*/
/*
mygrid.enableRowspan(true);//grid中的小块：rowspan
mygrid.setRowspan(3, 3, 3);
mygrid.setRowspan(3, 2, 2);
*/
/*
mygrid.enableUndoRedo();//do和undo
mygrid.doUndo();
mygrid.doRedo();
*/
mygrid.init();
mygrid.load("listDHXGridData.do", "json");
// mygrid.parse(data,"json")
//行用id计数，列从0计数,rowId,cellId
mygrid.cells(id, 0).setValue("");//grid设值
mygrid.cells(id,0).getValue(); //grid取值
mygrid.getRowIndex(mygrid.getSelectedId());//选中行
mygrid.getCheckedRows(1);//第二列的勾选行
grid.setStyle("background-color:navy;","","color:red;","height:30px");//设置grid的局部样式：
mygrid.clearSelection();//去除选中状态
function onButtonClick(menuitemId, type) {//快捷菜单--颜色
var data = mygrid.contextID.split("_");
//rowId_colInd;
mygrid.setRowTextStyle(data[0], "color:" + menuitemId.split("_")[1]);
return true;
}
function my_pre_func(rowId, celInd, grid) {//限定快捷菜单的列
if (celInd == 3) return true;
return false;
}
DIV.gridbox TABLE.row20px TR TD{height:30px;} //<!--样式文件中设置grid样式(行高) -->
JSON数据格式要求：
//dhtmlxGrid要求的JSON格式：
{"rows":[
{"id":9,"data":[1,"深圳市",100020,"XXX"]},
{"id":1052,"data":[1,"深圳市",101062,"XXX"]}
]}
//Map<List<map> (map要循环取值)
//dhtmlxCombox要求的Json格式：
{"item":[
["1111","安徽分区"],
["2222","江苏分区"],
["3333","江西分区"],
["4444","浙江分区"]
]}
//Map<List<list> (list要循环取值)
Excell Types：
//dhxGrid Base excell Types:
ro:It is a simple read only cell without edit possibility.
ed:It is a simple single line editor.
txt:It is a simple multi-line editor (small textarea)
ch:It is a Checkbox eXcell. Treats “1” as checked, “0” as not checked.
ra:It is a Radio button (column oriented).
co:it is a simple combobox.
link:It treats the value as a link source and renders it as a link
link^javascript:doSomething("param1","param2","param3")^_self
img:It treats the value as an image source and renders it as an image
some.gif^alt text^javascript:doSomething()^_self
price:It renders the value as the price amount
dyn:Stands for different coloring and marking based on the value
cp:It is a simple popup colorpicker.
calck:It is a popup calculator control that allows specific formatting through grid.setNumberFormat.
dhxCalendar:It is a popup calendar control in which dhxCalendar is used; the date format can be set by grid.setDateFormat.
dhxCalendarA:It is a popup calendar control in which dhxCalendar is used;
clist:It is a multiselect control, which dhxCalendar is used;
grid:dhtmlxgrid can be used as an editor for cells.
stree:dhtmlxtree can be used as an editor for cells.
context:dhtmlxmenu can be used as an editor for cells.
combo:Complex select box/combobox based on dhtmlxCombo can work in autocomplete mode.
sub_row:It shows the cell as an expandable sub row of the grid row (allows to implement “expandable details” pattern).
mygrid.setColTypes("dyn,ed,txt,price,ch,coro,ra,ro");
mygrid.setColTypes("dyn,ed,clist,calck,acheck,img");
其他：
dhtmlxGrid & dhtmlxTree interaction:
http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/13_interaction_other_components/03_pro_interaction.html
//search
http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/14_loading_big_datasets/01_50000.html
//keyword
http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/15_navigation/01_pro_keymap_access.html