jQuery EasyUI treegrid 增删改查 - 3

最新推荐文章于 2023-05-04 11:58:26 发布

原创最新推荐文章于 2023-05-04 11:58:26 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

8 篇文章

订阅专栏

ajax - jquery

3 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的表格编辑示例，其中包括添加、删除和编辑行的功能，并且能够计算并显示表格中所有行的汇总信息。该示例利用了treegrid插件来展示层级数据，同时提供了保存和取消编辑选项。

<script type="text/javascript">
		
		function formatProgress(value){
	    	if (value){
		    	var s = '<div style="width:100%;border:1px solid #ccc">' +
		    			'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
		    			'</div>';
		    	return s;
	    	} else {
		    	return '';
	    	}
		}
		var editingId;
		function deleteRow(){
			if (editingId != undefined){
				$('#tg').treegrid('select', editingId);
				return;
			}
			var row = $('#tg').treegrid('getSelected');
			if (row){
				editingId = row.id
				$('#tg').treegrid('remove', editingId);
				$('#tg').treegrid('reloadFooter');
			}
			$(".actionbtn").toggleClass("l-btn-disabled");
		}
		function edit(){
			if (editingId != undefined){
				$('#tg').treegrid('select', editingId);
				return;
			}
			var row = $('#tg').treegrid('getSelected');
			if (row){
				editingId = row.id
				$('#tg').treegrid('beginEdit', editingId);
			}
			$(".actionbtn").toggleClass("l-btn-disabled");
		}
		function insert(){
			if (editingId != undefined){
				$('#tg').treegrid('select', editingId);
				return;
			}
			/**/
			var rows = $('#tg').treegrid('getChildren');
			editingId = rows.length+1;
			var row = null;
			var _data = {"id":editingId,"name":"new name","persons":0,"begin":"3/19/2010","end":"3/20/2010","progress":10};
			var _parentId = 0;
			var row = $('#tg').treegrid('getSelected');
			if (row){
				$('#tg').treegrid('expand',row.id);
				_parentId = row.id;
			}else{
				var root = $('#tg').treegrid('getRoot');
				_parentId = null;
			}
			
			$('#tg').treegrid('append',{
				parent: _parentId,  // 这里指定父级标识就可以了
				data: [_data]
			});
			
			$('#tg').treegrid('beginEdit',_data.id);
			$(".actionbtn").toggleClass("l-btn-disabled");
		}
		function save(){
			if (editingId != undefined){
				var t = $('#tg');
				t.treegrid('endEdit', editingId);
				editingId = undefined;
				var persons = 0;
				var rows = t.treegrid('getChildren');
				for(var i=0; i<rows.length; i++){
					var p = parseInt(rows[i].persons);
					if (!isNaN(p)){
						persons += p;
					}
				}
				var frow = t.treegrid('getFooterRows')[0];
				frow.persons = persons;
				t.treegrid('reloadFooter');
				$(".actionbtn").toggleClass("l-btn-disabled");
			}
		}
		function cancel(){
			if (editingId != undefined){
				$('#tg').treegrid('cancelEdit', editingId);
				editingId = undefined;
			}
			$(".actionbtn").toggleClass("l-btn-disabled");
		}
	</script>
	
	<div style="margin:10px 0;">
		<a href="javascript:void(0)" disabled="disabled"  class="easyui-linkbutton actionbtn" onclick="save()">Save</a>
		<a href="javascript:void(0)" disabled="disabled" class="easyui-linkbutton actionbtn" onclick="cancel()">Cancel</a>
	</div>