dhtmlx grid 行编辑demo
唐弘和
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>行编辑</title>
<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>
</head>
<body>
<div style="width:100%;margin-top: 50px;text-align: right;">
<button onclick="addRow()">新增行</button>
<button onclick="deleteSelectedRow()" style="margin-left: 10px;">删除选中行</button>
<button onclick="getSelectedRowData()" style="margin-left: 10px;">获取选中行数据</button>
</div>
<div id="gridbox" style="width:100%;height:400px;margin: 10px auto;"></div>
<pre id="code">
</pre>
<script>
//自定义输入框
function eXcell_zdyText(cell){ //the eXcell name is defined here
if (cell){ // the default pattern, just copy it
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}
this.edit = function(){} //read-only cell doesn't have edit method
// the cell is read-only, so it's always in the disabled state
this.isDisabled = function(){ return true; }
this.setValue=function(val){
var row_id=this.cell.parentNode.idd; // gets the id of the related row
this.setCValue("<input type='text' id='zdytxt_"+row_id+"' value='"+val+"'>",val);
}
}
eXcell_zdyText.prototype = new eXcell;// nests all other methods from the base class
//自定义下拉框
function eXcell_zdySel(cell){ //the eXcell name is defined here
if (cell){ // the default pattern, just copy it
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}
this.edit = function(){} //read-only cell doesn't have edit method
// the cell is read-only, so it's always in the disabled state
this.isDisabled = function(){ return true; }
this.setValue=function(val){
var row_id=this.cell.parentNode.idd; // gets the id of the related row
var column_name = this.grid.getColumnId($(this.cell).index());//列名
console.log();
this.setCValue("<select id='zdysel_"+row_id+"' ><option value='1'>选项一</option><option value='2'>选项二</option><option value='3'>选项三</option></select>",val);
}
}
eXcell_zdySel.prototype = new eXcell;// nests all other methods from the base class
var rowId = 1;
var mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../codebase/imgs/");
mygrid.setHeader("复选,数字,字符串,文本域,日期/时间,单选下拉框,多选下拉框,zdy输入框,zdy下拉框");//the headers of columns
mygrid.setInitWidthsP("5,10,10,10,10,10,15,5,*"); //the widths of columns
mygrid.setColumnIds("sales,book,author,price,store,shipping,best,zdytxt,zdysel");
mygrid.setColAlign("center,right,left,left,center,left,left,left,left"); //the alignment of columns
mygrid.setColTypes("ch,edn,ed,txt,dhxCalendar,coro,clist,zdyText,zdySel"); //the types of columns
mygrid.setColSorting("str,int,str,str,str,int,str,str,str"); //the sorting types
// 注册多选下拉框
mygrid.registerCList(6,["选项一","选项二","选项三"]);
// 单选下拉框
var combobox = mygrid.getCombo(5);
combobox.put("1","单选一");
combobox.put("2","单选二");
combobox.put("3","单选三");
// 日期时间
mygrid.setDateFormat("%Y-%m-%d %H:%i");
mygrid.init(); //finishes initialization and renders the grid on the page
var data={
rows:[
{ id:1, data: ["0","100","A Time to Kill", "John Grisham",'','2', "选项一,选项二",'','2']},
]
};
mygrid.parse(data,"json");
function addRow() {
mygrid.addRow(++rowId,["0","","", "","","", "","", ""]);
//var cellObj = myGrid.cells2(mygrid.getRowsNum(), 1);
var _t_id = setTimeout(function () {
clearTimeout(_t_id);
mygrid.selectCell(mygrid.getRowsNum()-1,1);
mygrid.editCell();
},100);
}
function deleteSelectedRow() {
var _rId = mygrid.getSelectedRowId();
mygrid.deleteRow(_rId);
}
function getSelectedRowData() {
var _rId = mygrid.getSelectedRowId();
var data = {};
mygrid.forEachCell(_rId,function(cellObj,ind){
var colId=mygrid.getColumnId(ind);
if(colId=="zdytxt" || colId=="zdysel"){
//console.log(document.getElementById("zdytxt_"+_rId).value);
data[colId] = document.getElementById(colId+"_"+_rId).value;
}else{
data[colId] = cellObj.getValue();
}
});
document.getElementById("code").innerHTML = JSON.stringify(data);
}
</script>
</body>
</html>
类似资料：