datagrid 사용 방법 상세 설명(중요)

1.정적 HTML 을 datagrid 스타일 로 렌 더 링 합 니 다.    

<!--    ：   HTML   datagrid   -->
	<table class="easyui-datagrid">
		<thead>
			<tr>
				<th data-options="field:'id'">  </th>
				<th data-options="field:'name'">  </th>
				<th data-options="field:'age'">  </th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>001</td>
				<td>  </td>
				<td>90</td>
			</tr>
			<tr>
				<td>002</td>
				<td>  </td>
				<td>3</td>
			</tr>
		</tbody>
	</table>

2.ajax 요청 을 보 내 json 데 이 터 를 가 져 와 datagrid 를 만 듭 니 다.    제 이 슨 파일 제공         

<!--    ：  ajax    json    datagrid -->
	<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'" 
			class="easyui-datagrid">
		<thead>
			<tr>
				<th data-options="field:'id'">  </th>
				<th data-options="field:'name'">  </th>
				<th data-options="field:'age'">  </th>
			</tr>
		</thead>
	</table>

 
2.easyUI 가 제공 하 는 API 로 datagrid 만 들 기(파악)    

<!--    ：  easyUI   API  datagrid -->
	<script type="text/javascript">
		$(function(){
			//       ，      datagrid
			$("#mytable").datagrid({
				//         
				columns:[[
				 {title:'  ',field:'id',checkbox:true},
				 {title:'  ',field:'name'},
				 {title:'  ',field:'age'},
				 {title:'  ',field:'address'}
				 ]],
				//        ajax     
				url:'${pageContext.request.contextPath }/json/datagrid_data.json',
				rownumbers:true,
				singleSelect:true,
				//     
				toolbar:[
				 {text:'  ',iconCls:'icon-add',
				 	 //         
				 	 handler:function(){
				 	 	alert('add...');
				 	 }
				 },
				 {text:'  ',iconCls:'icon-remove'},
				 {text:'  ',iconCls:'icon-edit'},
				 {text:'  ',iconCls:'icon-search'}
				 ],
				//     
				pagination:true
			});
		});
	</script>

데이터 시트 에 페이지 바 를 사용 하면 서버 응답 을 요구 하 는 json 이 다음 으로 변 합 니 다.
 
청구 하 다.  
  
응답:    
   
 3.사례:파견 원 페이지 조회    
(1)페이지 조정             
페이지 의 datagrid URL 주소 수정             

      
   
(2)서버 구현
            
        분할 페이지 관련 속성
            
    

/**
	 *         
	 */
	public void pageQuery(PageBean pageBean) {
		int currentPage = pageBean.getCurrentPage();
		int pageSize = pageBean.getPageSize();
		DetachedCriteria detachedCriteria = pageBean.getDetachedCriteria();
		
		//  total---    
		detachedCriteria.setProjection(Projections.rowCount());//  hibernate    sql   ----》select count(*) from bc_staff;
		List<Long> countList = (List<Long>) this.getHibernateTemplate().findByCriteria(detachedCriteria);
		Long count = countList.get(0);
		pageBean.setTotal(count.intValue());
		
		//  rows---            

（3）detachedCriteria.setProjection(null);//hibenate 프레임 워 크 를 지정 하여 sql 을 보 내 는 형식---select*from bcstaff    

int firstResult = (currentPage - 1) * pageSize;
		int maxResults = pageSize;
		List rows = this.getHibernateTemplate().findByCriteria(detachedCriteria, firstResult, maxResults);
		pageBean.setRows(rows);
	}

//    ，           
	private int page;
	private int rows;
	
	/**
	 *       
	 * @throws IOException 
	 */
	public String pageQuery() throws IOException{
		PageBean pageBean = new PageBean();
		pageBean.setCurrentPage(page);
		pageBean.setPageSize(rows);
		//          
		DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Staff.class);
		pageBean.setDetachedCriteria(detachedCriteria);
		staffService.pageQuery(pageBean);
		
		//  json-lib PageBean    json，          
		//JSONObject---       json
		//JSONArray----           json
		JsonConfig jsonConfig = new JsonConfig();
		//          json
		jsonConfig.setExcludes(new String[]{"currentPage","detachedCriteria","pageSize"});
		String json = JSONObject.fromObject(pageBean,jsonConfig).toString();
		ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");
		ServletActionContext.getResponse().getWriter().print(json);
		return NONE;
	}

파견 원 의 대량 삭제  
  추출 원 표 에 삭 제 된 표지 위치 deltag 가 존재 합 니 다.1 은 삭 제 했 음 을 표시 하고 0 은 삭제 되 지 않 았 음 을 표시 합 니 다.   
(1)페이지 조정    
    

//           ：
function doDelete(){
		//             ，      
		var rows = $("#grid").datagrid("getSelections");
		if(rows.length == 0){
			//      ，    
			$.messager.alert("    ","           ！","warning");
		}else{
			//      ,     
			$.messager.confirm("    ","             ？",function(r){
				if(r){
					
					var array = new Array();
					//  ,    
					//           id
					for(var i=0;i<rows.length;i++){
						var staff = rows[i];//json  
						var id = staff.id;
						array.push(id);
					}
					var ids = array.join(",");//1,2,3,4,5
					location.href = "staffAction_deleteBatch.action?ids="+ids;
				}
			});
		}
	}

(2)서버 구현 첫 번 째 단계:Staff Action 에서 deleteBatch 일괄 삭제 방법 만 들 기    

//    ，       ids  
	private String ids;
	
	/**
	 *        
	 */
	public String deleteBatch(){
		staffService.deleteBatch(ids);
		return LIST;
	}

두 번 째 단계:Service 에서 일괄 삭제 방법 제공

/**
	 *        
	 *     ， deltag  1
	 */
	public void deleteBatch(String ids) {//1,2,3,4
		if(StringUtils.isNotBlank(ids)){
			String[] staffIds = ids.split(",");
			for (String id : staffIds) {
				staffDao.executeUpdate("staff.delete", id);
			}
		}
	}

세 번 째 단계:Staff.hbm.xml 에 HQL 문 구 를 제공 하여 파 견 된 사람 을 논리 적 으로 삭제 합 니 다.

 <!--         -->
 <query name="staff.delete">
 	UPDATE Staff SET deltag = '1' WHERE id = ?
 </query>

인원 을 파견 하여 기능 을 수정 하 다.
(1)페이지 조정    첫 번 째 단계:데이터 시트 에 더 블 클릭 이벤트 연결

두 번 째 단계:페이지 에 파견 원 창 을 추가 하여 파견 원 창 을 수정 합 니 다.

세 번 째 단계:정의 function

//                 
	function doDblClickRow(rowIndex, rowData){
		//         
		$('#editStaffWindow').window("open");
		//  form     load      
		$("#editStaffForm").form("load",rowData);
	}

(2)서버 구현    Staff Action 에서 edit 방법 을 만 들 고 파견 정 보 를 수정 합 니 다.

/**
	 *        
	 */
	public String edit(){
		//      ，  id      
		Staff staff = staffService.findById(model.getId());
		//             
		staff.setName(model.getName());
		staff.setTelephone(model.getTelephone());
		staff.setHaspda(model.getHaspda());
		staff.setStandard(model.getStandard());
		staff.setStation(model.getStation());
		staffService.update(staff);
		return LIST;
	}

여기 서 datagrid 사용 방법(중요)에 대한 상세 한 설명 은 여기까지 입 니 다.더 많은 datagrid 사용 방법 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!