DHTMLX使用

1.创建布局

main_layout = new dhtmlXLayoutObject(document.body, '1C');

2.获取布局对象

a = main_layout.cells('a');

3.设置隐藏单元格的头部

a.hideHeader();

4.创建一个工具栏

function createToolbar(){
		var toolbar = a.attachToolbar();
		toolbar.setIconsPath('<%=basePath%>images/icons/');
        toolbar.addButton("add", 1, "新增"+goodsCategoryCode+"_"+goodsCategoryName+"的品牌", "add.gif", null);
        toolbar.addSeparator("separator_1",2);
		toolbar.addButton("confirm", 3, "确定", "accept.gif", null);
		toolbar.addSeparator("separator_2",4);
		toolbar.addButton("close", 5 ,"关闭", "close.gif");
		toolbar.addSeparator("separator_3",6);
		toolbar.attachEvent("onClick",function(id) {
			if(id == "close") {
				parent.winOpen.close();
			} else if(id == "confirm") {
				doSelectCat();
			}else if(id == "add"){
                doAdd();
            }
		});
	}

5.创建grid列表

listGrid = a.attachGrid();
listGrid.setImagePath('<%=basePath%>dhtmlx/imgs/');
listGrid.setHeader("#master_checkbox,品牌编码,品牌名称",
			null,
			[
				"text-align:center;",
				"text-align:center;",
              "text-align:center;"
			 ]);
listGrid.attachHeader("&nbsp;,#text_filter,#text_filter");
listGrid.setColumnIds("xh,brandId,name");
listGrid.setInitWidths("40,*,*");
listGrid.setColAlign("center,left,left");
listGrid.setColTypes("ch,ro,ro");
listGrid.setColSorting("str,str,str");
listGrid.setSkin("dhx_skyblue");
//listGrid.setColumnHidden(2, true);
listGrid.enableSmartRendering(true,100);//懒加载
listGrid.init();

6.grid绑定事件

// 创建 ListGrid 对象
var listGrid = new dhtmlXGridObject('gridContainer');

// 初始化 ListGrid
listGrid.init();

// 定义自定义事件处理程序
function onRowSelect(rowId, cellIndex) {
  // 在控制台打印选中行的 ID 和选中的单元格索引
  console.log('选中的行ID：', rowId);
  console.log('选中的单元格索引：', cellIndex);
}

// 绑定事件处理程序到 ListGrid 的行选择事件
listGrid.attachEvent('onRowSelect', onRowSelect);

7. 通过选中行，获取行的值，并传给父窗口的方法