dhtmlx grid 行编辑demo

最新推荐文章于 2022-10-21 09:23:21 发布

xixi_666

最新推荐文章于 2022-10-21 09:23:21 发布

阅读量631

点赞数

分类专栏： dhtml js 文章标签： dhtmlGrid

本文链接：https://blog.csdn.net/xixi_666/article/details/103601994

版权

js 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

dhtml

1 篇文章 0 订阅

订阅专栏

<!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>