dhtmlxGrid有用程序片段

下面通过一个dhtmlxGrid的实例来向你展示该插件的常见使用方式。这里包含了dhtmlxGrid中最常见的使用，你掌握这些，你就可以将它应用到你的实际工作中了。下面是一些常用的JavaScript程序片段。

初始化表格，如下：

function initGrid() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("dhtmlxgrid/imgs/");      
    //标题显示内容      
    mygrid.setHeader("多选,单选,Name,Date of Birth, First Book Published");      
    //指明列的宽度，*表示是余下的宽度显示      
    mygrid.setInitWidths("*,50,50,50,50");      
    //表示内容排序位置，分别是左、中、中      
    mygrid.setColAlign("left,center,center,center,center");  
}

获取选中行的行ID，然后改变行ID，再次获取选中行的ID。如下：

function changRowid(){  
    var id = mygrid.getSelectedId();  
    mygrid.changeRowId( id, id+"1" );  
    alert(mygrid.getSelectedId())  
}

将选中行的字体变粗，如下：

function setRowTextBold(){  
    var id = mygrid.getSelectedId();  
    mygrid.setRowTextBold( id );  
}

设置选中行的样式（color:red;border:1px solid gray），如下：

function setRowTextStyle(){  
    var id = mygrid.getSelectedId();  
    mygrid.setRowTextStyle(id, "color:red;border:1px solid gray");  
}

将选中行从表格删除掉，如下：

function deleteColumn(){  
    var id = mygrid.getSelectedId();  
    mygrid.deleteColumn( id );  
}

设置段元个的类型，如下：

/*  
    ch ---- checkbox  
    ra ---- radio  
    ro ---- readonly  
    txt ---- 显示的是字符串  
*/  
mygrid.setColTypes("ch,ra,ro,link,txt");  
//mygrid.setColTypes("ed,dhxCalendar,dhxCalendarA");

公共广告位-前端

设置单元格按照什么类型排序，如下：

// 按照什么方式排序int,str,date 三个类型  
mygrid.setColSorting("str,str,str,str,date");

指定表格使用什么皮肤，如下：

//指明使用什么皮肤（天蓝色）,这个和前面引用是CSS对应起来  
mygrid.setSkin("dhx_skyblue");  
mygrid.setSkin("dhx_black");

初始化表格和加载数据，如下：

//初始化数据  
mygrid.init();  
// 从XML文件加载数据
mygrid.loadXML("../common/grid_dates.xml");

使用json对象初始化表格数据，并且设置回调函数。如下：

//备注：数据列一定要和标题栏对应起来，否则会显示前面的数据  
//上面每个配置项都需要一一对应，否则会出现意想不到的错误，很难发现，即对每一列样式的设置  
var js={
    rows : [
        {
            id:1001,  
            data:[  
                "0", //0表示checkbox没有被选中  
                "ra1", //非0表示radio被选中  
                "100", //^后面显示的是链接地址，一定要指明这列数据类型是link  
                "A Time to Kill^https://www.baidu.com",
                "05/01/1998"
            ]
        },  
        {
            id:1002,  
            data:[  
                "1",//非0表示checkbox被选中
                "0",//非0表示radio被选中
                "1000",  
                "Blood and Smoke",
                "01/01/2000"
            ]
        }
    ]
}
// 指明导入数据的回调函数  
mygrid.parse(js, function(){  
     //alert(1);  
}, "json");

获取指定单元格的信息，如下：

mygrid.cells(row_id, col) -- 通过行ID，列下标 确定cell对象   
mygrid.cells2(rowIndex,col) --  通过行、列下标 确定cell对象  
// 从第0行0列开始计算，弹出信息是05/01/1998  
alert( mygrid.cells2(0,4).getValue() );  
// 弹出信息是05/01/1998  
alert( mygrid.cells(1001,4).getValue() );

给指定的单元格赋值，设置值给行ID为1001的第5列，如下：

mygrid.cells(1001,4).setValue("05/01/1997");

绑定checkbox和radio事件 ，如下：

/*  
    rId - id or the row; 弹出的是行ID  
    cInd - index of the cell;  
    state- state of the checkbox/radiobutton.  
 */  
 mygrid.attachEvent("onCheckbox", function(rId,cInd,state){  
     alert(rId);//  
     alert(cInd);  
     alert(state);  
 });

设置数据表行被双击时触发的事件处理器，如下：

/*  
    rId - id or the row; 弹出的是行ID  
    cInd - index of the cell; 双击的列，从第0项开始  
 */  
mygrid.attachEvent("onRowDblClicked", function(rId,cInd){  
    alert(rId);  
    alert(cInd);  
});

设置数据表行被选中时触发的事件处理器，如下：

mygrid.attachEvent("onRowSelect", function(id, ind){  
    alert(id);  
    alert(ind);  
});

添加一行数据到表格的第一行位置，如下：

/*  
    new_id - id of the new row;  
    text - array|string of row's labels, may be a comma separated list or an array;  
    ind - position of the row (optional), row is added to the last position by default.  
*/  
mygrid.addRow(123,"0,0,555,huangbiao,1988/11/30",0);

将指定的数据行上/下移动一行，如下：  

mygrid.moveRowDown(123);  
mygrid.moveRowUp(123);

清除表格里面的全部数据，如下：

// 只删除数据，不删除header
mygrid.clearAll();   
// 数据和header全部删除   
mygrid.clearAll(true);

得到数据表总共的行数，如下： 

alert( mygrid.getRowsNum() );