对于easyui的使用的一些初步注释

//最近对jquery easyui有兴趣，了解了一下，并参考修改了部分项目的源码												//以下是一些本人对jquery easyui的一项实例进行的详细注释

var firstShowEditForm=0;
var opertype = "";
var lastDblClickRowData = null;
var btnSave = null;

$(document).ready(function(){
	$(function(){		
		$('#tbQueryList').datagrid({  	//easy ui数据表格
			singleSelect:true,		//设置为true将只允许选择一行
			border:false,		//不是datagrid新增的属性，是从panel（panel是一个用于构建其他组件的基础组件）继承过来的属性，该属性是用来决定是否显示边框
			fit:true,			//改属性同样继承自panel，当该项设置为true时设置panel的大小自适应父容器
			rownumbers : true, 	//显示行号
			nowrap:true, 		//禁止自动换行，设置为true，当数据长度超出列宽时将会自动截取。
			pagination:true, 		//显示分页工具条
			fitColumns:true, 		//充满整个datagrid，设置为true将自动扩展/收缩columns大小适应grid的宽度,防止水平滚动.
			queryParams:{'criteria.rows':25,'criteria.currentPage':1},	//设置分页参数，当前为第1页，每页显示25条记录，当记录多于25条时进行分页处理
			sortOrder:'desc',	//定义列排序方式, 仅仅只能是 'asc' 或者 'desc'.
			remoteSort:false,	//定义是否远程排序
			url:top.Client.CONST_PATH + "/wms/getInventoryList.action",	 //请求action，从数据库中获取数据
			columns:[[   						//datagrid 行配置对象
			{field:'CARGO_ID',title:'CARGO_ID',hidden:true}, 		//field:列字段名称
			{field:'CLASSIFY',title:'货物分类',width:80},  		//title:列标题文本
			{field:'CARGO_BRAND',title:'货物品牌',width:80},  	      //width:列宽度,如果未定义,宽度自动扩展适应其内容
			{field:'CARGO_NAME',title:'货物名称',width:120},		//hidden:true将隐藏该列
			{field:'CARGO_AMOUNT',title:'货物库存数量',width:120},   
			{field:'CARGO_MAX',title:'货物最大库存',width:100},
			{field:'CARGO_MIN',title:'货物最小库存',width:100}
			]],				//这里之所以有两个方括号，是因为可以做成水晶报表形式
			toolbar:[				//在dategrid表单的头部添加按钮
			         {text:'添加库存',iconCls:'icon-add',disabled:g_rights.add,handler:function(){editForm('add');}},
			         '-',			//'-'就是在两个按钮的中间加一个竖线分割，看着舒服
			         {text:'修改库存',iconCls:'icon-edit',disabled:g_rights.edit,handler:function(){editForm					('edit');}},
			         '-',
			         {text:'删除库存',iconCls:'icon-delete',disabled:g_rights.del,handler:function(){deleteForm();}},
			         '-',
			         {text:'选择多行数据',iconCls:'icon-unchecked',handler:function(){multipleChecked(this);}}
			], 		//iconCls:非toolbar新增属性，该属性继承自panel，该属性是用一个css样式来显示一个16*16 的icon在					   panel上
					//disabled：当改选项为true时禁用该按钮
					//handler：单击会触发的事件
			onDblClickRow : function(rowIndex, rowData) {	//当用户双击一行时触发，参数如下：	
				lastDblClickRowData = rowData;	//rowIndex：被点击的行索引，从0开始。
				showContentDialog();		//rowData：对应于被点击的行的记录。
			},
			onBeforeLoad:function(){			//在请求载入数据之前触发，如果返回false将取消载入
				paging();				//初始化分页显示函数
			}
		});
	});
});

//初始化分页显示
function paging(){
	$('#tbQueryList').datagrid('getPager').pagination({		//分页工具
		showPageList:false, 				//是否显示每页数据显示数列表 [10,20,30,40,50]
		showRefresh:false,  				//是否显示页面刷新按钮
		//displayMsg:'', 					//将'显示{from}到{to},共{total}记录'设为空,
		beforePageText:'第',
		afterPageText:'页,共{pages}页',
		pageSize:25,
	    onSelectPage: function(pageNumber, pageSize){		//当用户选择新的页面时触发。回调函数包含两个参数:
	    	$("#tbQueryList").datagrid('reload',{		//pageNumber：新的页码
	    		'criteria.rows':pageSize,			//pageSize：新的页面尺寸
	    		'criteria.currentPage':pageNumber
	    	});
	    }
	});
}

//编辑或添加库存
function editForm(showType){
	if(showType=='edit'){
		var rowDatas = $('#tbQueryList').datagrid('getSelections'); 	//getSelections：返回所有被选择的行，当没有记录被选择时，将返回一个空数组。
		if(rowDatas.length==0 || rowDatas.length>1){			//当选中多行或者没选的时候触发事件
			$.messager.alert('提示',"请选择一行需要编辑的数据再进行操作","info");
			return;
		}
	}
	if(firstShowEditForm==0){
	    var opt = {
		    height:350,			//指定对话框的高度
	        width:500,				//指定对话框的宽度
	        title:'添加或修改库存',		//指定对话框的标题
	        modal:true,				//不是dialog的新增属性，继承自window，定义窗口是否带有遮罩效果
	        onOpen:function(){			//在对话框被打开后触发事件，继承自window的事件，而window又从panel中继承该事件
	        	if(firstShowEditForm==0){
	        		dialogMask("divEditForm");	//遮罩？？百度木有结果
	        		$('#frmEditForm').parent().css('display','block');			//更改frmEditForm父类的css样式
	        		$('#frmEditForm').attr('src','inventory-edit.jsp?ShowType=' + showType); //更改frmEditForm的src属性
	        	}
	        }
	    };
	    $("#divEditForm").dialog(opt);	//dialog一种对话窗口，该对话框是一种特殊类型的窗口，它可以有一个工具栏上的顶部和底部的按钮栏。
	    firstShowEditForm=1;
	}else{
		setDialogInfo(showType);
	}
}

//设置对话框显示信息
function setDialogInfo(showType){
	opertype = showType;			//变量，保存操作类型，edit或者add
	var showbuttons = [{
		text:'保存',			//text：按钮显示的文本
		iconCls:'icon-save',		//iconCls： 显示背景图片的CSS类
		handler:function(){		//handler： 当按钮被点击时调用的一个函数
			btnSave = $(this);
						//contentWindow 兼容各个浏览器，可取得子窗口的 window 对象
			document.getElementById('frmEditForm').contentWindow.save(opertype);
		}
	},{
		text:'关闭',
		iconCls:'icon-cancel',
		handler:function(){
			$('#divEditForm').dialog('close');
	}}];
	var dialogTitle = "";
	var dialogIcons = "";
	switch(showType){
	case "edit":
		dialogTitle = "库存管理－修改";
		dialogIcons = "icon-edit";
		break;
	case "add":
		dialogTitle = "库存管理－添加";
		dialogIcons = "icon-add";
		break;
	}
	$("#divEditForm").dialog({buttons:showbuttons,title:dialogTitle,iconCls:dialogIcons});//设定对话框的参数
	document.getElementById('frmEditForm').contentWindow.show(showType);		//显示隐藏的frmEditForm
	dialogUnMask();								//？？不知道有啥用
}

//删除库存
function deleteForm(){
	var str = "";
	var selecteds = $('#tbQueryList').datagrid('getSelections');
	if (selecteds.length>0) {
		$.messager.confirm('信息', '确定删除所选记录吗?', function(r){
			if (r){
				jQuery.each(selecteds, function(i, rowData) {
	        		str = str +  rowData["CARGO_ID"] + ",";
	        	});
	        	$.ajax({					//产生一个ajax请求
	        		url:top.Client.CONST_PATH + "/wms/deleteInventory.action",								//url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址	       	        						type:'POST',													/*type: 要求为String类型参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但			仅部分浏览器支持。*/
	        		
	        		async:false,			/*async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求		                       如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。 */
	        		
	        		data:{idStr: str.substring(0, str.length-1)}, /*data: 要求为Object或String类型的参数，发送到服务器的数据。
	 							如果已经不是字符串，将自动转换为字符串格式。*/
	        		
	                success: function(){$('#tbQueryList').datagrid('reload');}								//success：要求为Function类型的参数，请求成功后调用的回调函数
	        		//'reload'更新easyUI的数据表格
	        	});
			}
		});
    }else {
    	$.messager.alert('提示','请选择需要删除的记录!','info');
    }
}

//获取GRID当前选中行
function getSelectRowData(){
	return $('#tbQueryList').datagrid('getSelected');
}

function submitResult(result){
	switch(result){
	case "1":
		$('#divEditForm').dialog('close');
		$.messager.alert('提示','保存成功!','info');
		$('#tbQueryList').datagrid('reload');
		break;
	default:
		break;
	}
}

function showMessage(message){
	$.messager.alert('提示',message,'info');
}

//多行数据选择
function multipleChecked(obj){
	var bChecked=false;
					//find():搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
	var objunchecked=$(obj).find("span .icon-unchecked");
	 if(objunchecked.length>0){
		 objunchecked.removeClass("icon-unchecked").addClass("icon-checked");
		 			//移除一个类后再添加一个类，即改变当前元素的CSS样式
		 bChecked=true;
	 }else{
		 var objchecked=$(obj).find("span .icon-checked");
		 objchecked.removeClass("icon-checked").addClass("icon-unchecked");
		 bChecked=false;
	 }
	 
	 if(bChecked==false){
		 $('#tbQueryList').datagrid('unselectAll');		//unselectAll：取消选择所有页面的行
	}
	$('#tbQueryList').datagrid('options').singleSelect=!bChecked;	//singleSelect：设置为true将只允许选择一行。
}
/**
 * 设置保存按钮不可用
 */
function setSaveBtnDisable(){
	if(btnSave != null) btnSave.linkbutton('disable');
}