JS开发的一些代码块

1、tab页切换时在加载当前tab页内容

EeasyUI Tabs 切换时加载页面代码示例


<!-- tab分组  -->
<div id="tabs" class="easyui-tabs" fit="true" style="border:0;">
	<div title="基本信息" id="baseInfoPage" style="width: 99%; height: 99%; border: 0;" >
<iframe    scrolling=no style="width: 100%; height: 100%; border: 0;" frameborder="0" src=""></iframe>
</div>
</div>

<script type="text/javascript">
//<![CDATA[
$(function() {
     $('#tabs').tabs({   
         onSelect: function(){  
           openTab();                                    
         }  
     });  
});

//tab url
var urls = {		
baseInfoPage:"${ctx}/grid/ physicalgrid!showBaseInfo?id=${pgridId}&rd="+Math.random(),	netSrcPage:"${ctx}/grid /physicalgrid!showNetRes?id=${pgridId}&rd="+Math.random(),	
	cooperatePage:"${ctx}/grid/physicalgrid!showCooperates?id=${pgridId}&rd="+Math.random(),	
	competitorPage:"${ctx}/grid/physicalgrid!showCompetitorList?pgridId=${pgridId}&rd="+Math.random(),	
	buildingPage:"${ctx}/grid/physicalgrid!showBuildingList?pgridId=${pgridId}&rd="+Math.random()	
}
function  openTab(){
	var tab = $('#tabs').tabs('getSelected');  
    var tbId = tab.attr("id");  
    //获取tab的iframe对象  
    var iframe = $("#"+tbId+" iframe:first-child");  
    if(!$(iframe).attr("src")){
    	$(iframe).attr("src",urls[tbId]);
    }
}
//]]>
</script>

2、二级联动

以营销单元刷销售资源库下拉框为例
<!-- 上部:查询表单 -->
    <div data-options="region:'north'" class="search">
        <fieldset>
            <legend>查询条件</legend>
            <form id="serachForm">
                <table class="search-table">
                    <tr>
                        <th>营销单元：</th>
                        <td>
<!--                         <input type="text" maxlength="" name="areaId" id = "area"/> -->
                        <tags:area-common 
                        city_id="cityId" 
                        orgId="${orgId}" 
                        staffid="${staffid}" 
                        min_id="miId" 
                        grid_name="gridName" 
                        grid_id="gridId" 
                        required="" 
                        eparchy_id="eId" 
                        eparchy_name="eName" 
                        city_name="cName" 
                        areaview_id="area"
                        min_name="miName"
                        eparchy_value=""
                        city_value=""
                        grid_value=""
                        min_value=""
                        >
                        </tags:area-common>
                        </td>
                        <th>销售资源库：</th>
                        <td>
							<input id="cc" name="sellResourStoreId" class="easyui-combobox" />
                        </td>



Js代码
$("#miId").bind("propertychange", function () {
	var url = '${ctx}/marketing/store/invetorystore!sellResourStore';
	$('#cc').combobox({
    		url: '${ctx}/marketing/store/invetorystore!sellResourStore',
    		valueField:'sellResourStoreId',   
    		textField:'sellResourStoreName'});
});	


其中的miId对应营销单元中的min_id="miId"，营销单元属性具体使用参考公共组件文档
Js代码中为营销单元属性改变事件注册一个函数，当营销单元中的属性值发生改变，比如二区变为三区时，就会自动通过combobox中定义的url去后台请求，得到一个list去初始化被刷销售资源库的那个下拉框。


后台刷的代码：
public String sellResourStore() throws SysException {
		String quju = request.getParameter("quju");
		String fenju = request.getParameter("fenju");
		String wangge = request.getParameter("wangge");
		if (quju == null || quju.equals("")) {
			quju = "s";
		}
		if (fenju == null || fenju.equals("")) {
			fenju = "s";
		}
		if (wangge == null || wangge.equals("")) {
			wangge = "s";
		}

		String areaStr = quju + "," + fenju + "," + wangge + ",";
		List<SellResourStoreMVO> sellResoursStroeList = new ArrayList<SellResourStoreMVO>();
		try {
			sellResoursStroeList = invetoryStoreDelegate
					.getSellReStroeList(areaStr);
		} catch (AppException e) {
			appInfo.put("message", e.getMessage());
		}
		this.handleJsonResult(sellResoursStroeList);
		return "success";
	}



其中的handleJsonResult函数会自动将你查出来的list转换成一个json对象，并初始化你需要的下拉框