springmvc 之 easyUI開發商城管理系統

1.分頁

 

　　url:controller的路徑

　　pageSize:每頁顯示的行數 ---后台參數名(rows)

　　會向后台傳遞一個 page參數,表示當前頁.---后台參數名(page)

　　controller中:

　　

	@RequestMapping("/list")
	@ResponseBody
	public EasyUIPageItem itemPage(int page,int rows) {
		 
		EasyUIPageItem myEasyUIPageItem = itemService.listByPage(page,rows);
		return myEasyUIPageItem;
	}

　　

　　后台接收兩個參數 返回一個實體類為(變量名必須為total,和rows)

　　class EasyUIPageItem{

　　　　long total;

　　　　list<?> rows;

 　　　　get...

　　　　set...

　　　　}

　　的json對象

　　前端table代碼如下

<thead>
        <tr>
        	<th data-options="field:'ck',checkbox:true"></th>
        	<th data-options="field:'id',width:60">商品ID</th>
            <th data-options="field:'title',width:200">商品標題</th>
            <th data-options="field:'cid',width:100">葉子類目</th>
            <th data-options="field:'sellPoint',width:100">賣點</th>
            <th data-options="field:'price',width:70,align:'right',formatter:TAOTAO.formatPrice">價格</th>
            <th data-options="field:'num',width:70,align:'right'">庫存數量</th>
            <th data-options="field:'barcode',width:100">條形碼</th>
            <th data-options="field:'status',width:60,align:'center',formatter:TAOTAO.formatItemStatus">狀態</th>
            <th data-options="field:'created',width:130,align:'center',formatter:TAOTAO.formatDateTime">創建日期</th>
            <th data-options="field:'updated',width:130,align:'center',formatter:TAOTAO.formatDateTime">更新日期</th>
        </tr>
    </thead>

　2.樹狀類別顯示

 

　　在js中找selectItemCat的jQuery方法如下:

　　

 initItemCat : function(data){
        $(".selectItemCat").each(function(i,e){
            var _ele = $(e);
            if(data && data.cid){
                _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
            }else{
                _ele.after("<span style='margin-left:10px;'></span>");
            }
            _ele.unbind('click').click(function(){
                $("<div>").css({padding:"5px"}).html("<ul>")
                .window({
                    width:'500',
                    height:"450",
                    modal:true,
                    closed:true,
                    iconCls:'icon-save',
                    title:'選擇類目',
                    onOpen : function(){
                        var _win = this;
                        $("ul",_win).tree({
                            url:'/item/cat/list',//請求的參數名為 id 
                            animate:true, //      text id   isLeaf的值為state:判斷節點狀態 分別為open或closed
                            onClick : function(node){
                                if($(this).tree("isLeaf",node.target)){
                                    // 填寫到cid中
                                    _ele.parent().find("[name=cid]").val(node.id);
                                    _ele.next().text(node.text).attr("cid",node.id);
                                    $(_win).window('close');
                                    if(data && data.fun){
                                        data.fun.call(this,node);
                                    }
                                }
                            }
                        });
                    },
                    onClose : function(){
                        $(this).window("destroy");
                    }
                }).window('open');
            });
        });
    },
    

　　此方法會請求一個url:/item/cat/list

　　請求的參數為:id

　　后台接收一個參數 返回一個實體類為(變量名必須為id,text.state且state必須為"closed"或"open")

　　class EasyUIPageItem{　　

　　　private long id;
　　　private String text;
　　　private String state;

 　　   get...

　　　set...

　　　　}

　　的list集合並使用@ResponsBody轉換為json對象

　　controller為:

        @RequestMapping("item/cat/list")
	@ResponseBody
	public List<EasyUIItemCat> catlist(@RequestParam(value="id",defaultValue="0")Long itemCatId) {
		return 	itemCatService.findItemCat(itemCatId);
	} 

　　zookeeper中上傳的服務為:

　　

        @Override
	public List<EasyUIItemCat> findItemCat(Long itemCatId) {
		// TODO Auto-generated method stub
		List<EasyUIItemCat> list = new ArrayList<>();
		TbItemCatExample example = new TbItemCatExample();
		Criteria criteria = example.createCriteria();
		criteria.andParentIdEqualTo(itemCatId);
		List<TbItemCat> itemCats = itemCatMapper.selectByExample(example);
		
		for(TbItemCat itemCat:itemCats)
		{
			EasyUIItemCat easycat = new EasyUIItemCat();
			easycat.setId(itemCat.getId());
			easycat.setText(itemCat.getName());
			easycat.setState(itemCat.getIsParent()?"closed":"open");
			
			list.add(easycat);
		}
		
		return list;
	}