【EasyUI】datagrid相關操作、彈窗windows

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");
		});
	}

7.總結

1. 設置datagrid行高：easyui.css中設置.datagrid-row{height:25px;}，默認爲25px高，可自行修改。
2. 固定列：當列數目過多或太寬超過屏幕寬度，設置frozenColumns即可。
3. 初始化查詢參數：queryParams
4. 行內部操作：formatter+onLoadSuccess方法渲染
5. datagrid勾選/選擇：獲取選擇+獲取主要id
6. form序列化：
   
7. datagrid默認設置：

8.源碼

github:https://github.com/BeHappyWsz/easyui-validate.git

資源下載：http://download.csdn.net/download/qq_33560169/10159211#

包含了1000個圖標，無法直接放在百度盤內，若需要也可留言。