由於公司業務變更和任務安排，博主最近開始寫前端了，前端頁面！！！！雖然之前一直覺得前端很繁瑣，但是確實繁瑣啊，沒辦法，卯足勁乾乾幹。

公司前端用的easyui框架，博主之前沒咋弄過前端，不要說easyui了，所以蹭這次機會，來玩玩easyui。

接觸了一段時日後，博主真心覺得easyui很強大，各種功能外掛很齊全，使用起來也很方便。某些朋友說有點醜哈哈，確實不如現在主流的vue、angular以及bootstrap好看。還有一個是easyui文件少，使用起來費勁。好了，廢話不多說了，接下來開始總結一下最近easyui遇到的各種坑吧。

博主使用easyui的Datagrid顯示錶格資料，接下來一起來先看看datagrid吧。

<table id="dg" class="easyui-datagrid" title="FB League Serach" style="width:auto;height:auto"
			data-options="
				iconCls: 'icon-edit',  //載入圖示
				singleSelect: true,    //單行選中
				toolbar: '#tb',
				
				onClickRow: onClickRow,  //點選行編輯
				pagination:true,   //開啟分頁功能
				pagePosition:'bottom',
				rownumbers:true,
				pageSize:20,       
				pageList: [27, 28, 30],
				fitColumns:true,
				fit:true,  //固定分頁導航欄位置
				">
				 
				<%-- url: '<%=request.getContextPath()%>/football/listPheasantLeagueVerbose.do',
				method: 'get',  --%>
			<thead>
			<tr>
				<th data-options="field:'id',width:50">Item ID</th>
				<th data-options="field:'leagueNameCn',width:250,editor:'text'">LeagueNameCN</th>
				<th data-options="field:'leagueNameEn',width:250,editor:'text'">LeagueNameEN</th>
				<th data-options="field:'leagueNameBig5',width:250,editor:'text'">LeagueNameBig5</th>
				<th data-options="field:'leagueNameAbbr',width:250,editor:'text'">LeagueNameAbbr</th>
				<th data-options="field:'leagueNameOther',width:250,editor:'text'">LeagueNameOther</th>
				<th data-options="field:'sport',width:200,editor:'text'">Sport</th>
				<th data-options="field:'leagueLevel',width:200,editor:'numberbox'">LeagueLevel</th>
				
			</tr>
			</thead>
		</table>
//新增按鈕
<div id="tb" style="height:auto;">
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()" style="width:200px;height:30px;">Append</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()" style="width:200px;height:30px;">Remove</a>
		<a href="javascript:appendRow()" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()" style="width:200px;height:30px;">Accept</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()" style="width:200px;height:30px;">Reject</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()" style="width:200px;height:30px;">GetChanges</a>
	</div>
 

在table初始化時，可以設定url和method，datagrid會呼叫內部封裝的ajax方法去load資料，但是資料是全量載入和顯示的，這時候不會真正的分頁，點選分頁只是遊標會變化，資料不會有顯示上的變化。

tabe的append remove accept和reject方法如下js實現：在對應的按鈕下實現ajax請求與後臺和資料庫互動。通過

<a href="javascript:appendRow()" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()" style="width:200px;height:30px;">Accept</a>
 

<script type="text/javascript">
		var editIndex = undefined;
		function endEditing(){
			if (editIndex == undefined){return true}
			if ($('#dg').datagrid('validateRow', editIndex)){
				$('#dg').datagrid('endEdit', editIndex);
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		function onClickRow(index){
			if (editIndex != index){
				if (endEditing()){
					$('#dg').datagrid('selectRow', index)
							.datagrid('beginEdit', index);
					editIndex = index;
				} else {
					$('#dg').datagrid('selectRow', editIndex);
				}
			}
		}
		
		
		function append(){
			if (endEditing()){
				$('#dg').datagrid('appendRow',{status:'P'});
				editIndex = $('#dg').datagrid('getRows').length-1;
				$('#dg').datagrid('selectRow', editIndex)
						.datagrid('beginEdit', editIndex);
			}
		}
		
		//增加一行到資料庫
		function appendRow(){
			var rows = $('#dg').datagrid('getSelections');
			//var json = [];
			var loc;
			
				loc = {
					"id":rows[0].id,	
					"leagueNameCn":rows[0].leagueNameCn,
					"leagueNameEn":rows[0].leagueNameEn,
					"leagueNameBig5":rows[0].leagueNameBig5,
					"leagueNameAbbr":rows[0].leagueNameAbbr,
					"leagueNameOther":rows[0].leagueNameOther,
					"sport":rows[0].sport,
					"leagueLevel":rows[0].leagueLevel
				};
				//json.push(loc);
			
			json = JSON.stringify(loc);
			//alert(json);
			
			$.ajax({
				url:'<%=request.getContextPath()%>/football/savePheasantLeague.do',
				type:'post',
				async:true,
				dataType:'json',
				data:{"league":json},
				error:function(){alert("操作不成功");},
				success:function(response){
					if (response.value == 0) {
	                    alert("success");
	                    location.reload();
	                } else {
	                    alert("failed")
	                }
				}
			});
		}
		
		
		function removeit(){
			if (editIndex == undefined){return}
			$('#dg').datagrid('cancelEdit', editIndex)
					.datagrid('deleteRow', editIndex);
			editIndex = undefined;
		}
		function accept(){
			if (endEditing()){
				$('#dg').datagrid('acceptChanges');
			}
		}
		function reject(){
			$('#dg').datagrid('rejectChanges');
			editIndex = undefined;
		}
		function getChanges(){
			var rows = $('#dg').datagrid('getChanges');
			alert(rows.length+' rows are changed!');
		}
</script>

接下來，就開啟用datagrid的前端分頁方法。

//載入資料時用js做前臺分頁
		function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判斷資料是否是陣列
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage:function(pageNum, pageSize){
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh',{
                        pageNumber:pageNum,
                        pageSize:pageSize
                    });
                    dg.datagrid('loadData',data);
                }
            });
            if (!data.originalRows){
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }
 
         $(function(){//載入資料
            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid({
            	url:'<%=request.getContextPath()%>/football/listPheasantLeagueVerbose.do',
            	method: 'get'
            	})
        }); 

後臺controller：返回json陣列

@RequestMapping(value = "/listPheasantLeagueVerbose.do", method = RequestMethod.GET, produces = {MediaType.APPLICATION_JSON_VALUE})
    @ResponseBody
    public List<PheasantLeagueDTO> listPheasantLeagueVerbose() {
		
        return pheasantService.listPheasantLeagueVerbose();
    }

之前用ajax請求url載入資料，如下面的方法：

 $(function(){//載入資料
            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
        });

//ajax載入資料
		function getData(){
			$.ajax({
				url:'<%=request.getContextPath()%>/football/listPheasantLeagueVerbose.do',
				type:'get',
				async:true,
				dataType:'json',
				data:null,
				error:function(){alert("loading data failed.");},
				success:function(data){
					if (data != null) {
	                    alert("success");
	                    //location.reload();
	                    return data;
	                } else {
	                    alert("failed")
	                }
				}
			 	
			});

通過前端除錯發現在呼叫getData之後，還沒帶success方法之前就進入到pageFilter分頁方法了，導致分頁方法傳參data為null，判斷data是否為陣列時，data.length則報錯，不知為什麼，還請各位大佬指教。