【EasyUI】datagrid相关操作、弹窗windows

最新推荐文章于 2023-05-18 09:05:18 发布

炒熟的番茄

最新推荐文章于 2023-05-18 09:05:18 发布

阅读量769

点赞数 1

分类专栏： Easyui 文章标签： easyui datagrid

本文链接：https://blog.csdn.net/qq_33560169/article/details/78807551

版权

Easyui 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

datagrid相关操作、弹窗windows

1.datagrid+gridbar+固定列+默认设置

$.fn.datagrid.defaults.fitColumns = false;
$.fn.datagrid.defaults.border = false;
$.fn.datagrid.defaults.singleSelect = true;
$.fn.datagrid.defaults.pagination = true;
$.fn.datagrid.defaults.pageSize = 20;
$.fn.datagrid.defaults.fit = true;
$.fn.datagrid.defaults.pageList = [8, 10, 20];
$.fn.datagrid.defaults.checkOnSelect = false;
$.fn.datagrid.defaults.selectOnCheck = false;

		<div data-options="region:'center',border:false" title="数据列表">
			<table id="grid" toolbar="#gridbar"></table>
				<div id="gridbar">
				<div style="padding: 2px">
					<a id="addBtn"    class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-add'">新增</a>
					<a id="updateBtn" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-page_edit'">查看/更新</a>
					<a id="delBtn"    class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-delete'">删除</a>
				</div>
			</div>
		</div>

	/** grid对象+渲染+按钮* */
	var grid = $("#grid");
	renderGrid();
	bindGridToorBar();
	
	//渲染datagrid,固定数据无法分页。
	function renderGrid(){
		grid.datagrid({
			url :URL.gridData,
			onDblClickRow : function(index,row) {//双击事件
					openFormWin(row.id,row.d);
			},
			queryParams:{//进行传参,此处只是模拟。
				id :'FI-SW-01',
				d  :'Large'
			},
			frozenColumns :[[
				{field:"id",checkbox:true},
				{field:"a",title:"a",align:"left",halign:"center",width:100},
				{field:"b",title:"b",align:"left",halign:"center",width:100},
				{field:"c",title:"c",align:"left",halign:"center",width:100},            
			]],
			columns:[[
			    {field:"d",title:"d",align:"left",halign:"center",width:100},
			    {field:"e",title:"e",align:"left",halign:"center",width:100},
			    {field:"f",title:"f",align:"left",halign:"center",width:100},
			    {field:"g",title:"g",align:"left",halign:"center",width:100},
			    {field:"h",title:"h",align:"left",halign:"center",width:100},
			    {field:"cz",title:"操作",align:"center",halign:"center",width:200,formatter: fmtCz}
			]],
			onLoadSuccess : function(){
				$(".fmtBtn").linkbutton({
					plain : true,
					onClick : function(){
						var id = $(this).data("id");
						doSomething(id);
					}
				});
				//也可用只渲染为按钮
				$(".fmtBtn").each(function(){
					var d = $(this).data("d");
					$(this).tooltip({    
						position: 'right',    
						content: "<span style='color:#abc'>"+d+"</span>",    
						onShow: function(){        
							$(this).tooltip('tip').css({            
								backgroundColor: '#666',            
								borderColor: '#666'        
							});    
						}
					});
				});
			}
		})
	}

2.formatter渲染行操作

按钮的渲染，已在上面onLoadSuccess中给出。

	/**
	 * formatter方法
	 */
	function fmtCz(value,row,index){
		return "<a class='fmtBtn' data-id='"+row.id+"' data-d='"+row.d+"' href='#' style='background-color:#3EF;color:#FFF;'>点击</a>";
	}

3.datagrid选择/勾选

这2个方法可以设置为公用方法进行调用。

function gridSelectedValid(grid) {
	var row = grid.datagrid("getSelected");
	if (row != null) {
		return row;
	} else {
		$.messager.alert("提示", "无选择数据");
		return false;
	}
}

function gridChecked(grid) {
	var rows = grid.datagrid("getChecked");
	
	if (rows.length > 0) {
		return $.map(rows, function(n) {
			return n.id;
		}).join(",");
	} else {
		$.messager.alert("提示", "无勾选数据");
		return false;
	}
}

4.gridbar操作

	/** grid按钮事件* */
	function bindGridToorBar() {
		$("#addBtn").bind("click",function(){
			openFormWin();
		});
		
		$("#updateBtn").bind("click",function(){
			var row = gridSelectedValid(grid);
			if(row){
				openFormWin(row.id);
			}
		});
		
		$("#delBtn").bind("click",function(){
			deleteByIds();
		});
	}

	//删除测试
	function deleteByIds(){
		var ids = gridCheckedValid(grid);//在通用js中设置了统一的方法
		if(ids){
			$.messager.confirm("提示","是否确定?",function(r){
				if(r){
					alert(ids);
				}
			});
		}
	}

5.onDblClickRow行双击事件

行双击事件，一般为打开查看事件，需要开启新的弹窗页面。

	/**跳转到其他页面**/
	function openFormWin(id,d){
		var win = $("<div id='newWin'></div>").window({
			title : id ? "查看" :"新增",
			href :URL.formWin,
			width : 500,
			height : 302,
			onLoad : function(){				
	        	if(id){
					formLoadData(id);
				}
	        	$("#haha").textbox("setValue",d);
			},
			onClose : function() {
				win.window('destroy');
			}
		});
	}

6.查询+清空+form序列化

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
  };

<a id="query" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-zoom'">查询</a>
<a id="clear" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-cross'">重置</a>

	/** 查询按钮事件 **/
	function bindSearchBtns(){
		
		//带参数，也可序列化数组类型,load时可查看js中url中的参数
		$("#query").unbind().bind("click",function(){
			var formData = queryForm.serializeObject({transcript:"overlay"});
			grid.datagrid("load",formData);
		});
		//查询form清空
		$("#clear").unbind().bind("click",function(){
			queryForm.form("clear");
		});
	}