easyui-tree資料讀取與儲存

阿新 • • 發佈：2019-01-12

easyui版本：

jQuery EasyUI 1.4.3

工具：eclipse+mysql

注：程式碼有刪除，因為是公司專案，主要是easyui-tree的獲取及儲存

表結構為：商品型別表(shop_type)---》商品表(shop)---》商品規格表(shop_standard),商品表存在商品型別id,商品規格表存在商品id

step1--定義一個儲存json格式的實體:

package com.ruiyun.byloic.entity.distribution;
import  java.util.*;

/**
 * Created by thinkpad98 on 2017/7/12.
 */
public class  
TreeNode {
    private String id;  //節點的id值
private String text; //節點顯示的名稱
private String state; //節點的狀態
    // 請在整個樹轉換成jsonString時,將字串Checked換成checked，否則easyui不認
private String iconCls;//圖示
private String getIconCls() {
        return iconCls;
    }

    private void setIconCls(String iconCls) {
        this 
.iconCls = iconCls;
    }

    private boolean checked ;  //注意：轉成JsonTreeString時，將"Checked"替換成"checked",否則選中效果出不來的
private List<TreeNode> children;  //集合屬性，可以儲存子節點
public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getText() {
        return  
text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public boolean isChecked() {
        return checked;
    }

    public void setChecked(boolean checked) {
        this.checked = checked;
    }

    public List<TreeNode> getChildren() {
        return children;
    }

    public void setChildren(List<TreeNode> children) {
        this.children = children;
    }

    public TreeNode(String id, String text, String state,boolean checked, List<TreeNode> children) {
        this.id = id;
        this.text = text;
        this.state = state;
        this.iconCls = "icon-blank";
        this.checked = checked;
        this.children = children;
    }
    public TreeNode() {
        this.id = null;
        this.text = null;
        this.state = null;
        this.checked = false;
        this.children = null;
        this.iconCls=null;
    }
}

step2----查詢資料遍歷存入TreeNode實體：

/**
 * s樹形選單查詢
 *
 * @return
* @throws Exception
 */
public List<TreeNode> queryTreeNode(String distribution_type_id) throws Exception {
    //商品型別
StringBuffer sql = new StringBuffer("SELECT t.* FROM shop_type");
    List<ShopType> shopType =  new SimpleDbRunner().findBeanList(ShopType.class, sql.toString());

    //商品
sql = new StringBuffer("SELECT i.* FROM shop_info i");
    List<Shop> shop =  new SimpleDbRunner().findBeanList(Shop.class, sql.toString());

    //檢視/編輯跳轉查詢的商品規格
sql = new StringBuffer("SELECT * from shop_standard ");

List<ShopStandard> shopStandard =  new SimpleDbRunner().findBeanList(ShopStandard.class, sql.toString());


    String val="";
   //商品型別list
List<TreeNode> stShopType= new ArrayList<TreeNode>();
    for(ShopType st : shopType) {
        //商品list
List<TreeNode> stChilds = new ArrayList<TreeNode>();

        for (Shop s : shop) {
            //商品規格list
List<TreeNode> sChilds = new ArrayList<TreeNode>();
            //商品型別與商品表裡商品型別相同
if (st.getId().equals(s.getShop_type_id())) {
                stChilds.add(new TreeNode(s.getId(),s.getShop_name(),"open",false,sChilds));
            }

            //迴圈商品規格
for (ShopStandard ss : shopStandard) {
                //如果商品與商品規格表裡商品id相同
if (s.getId().equals(ss.getShop_info_id())) {

   //將父級id繫結在規格id上
                    sChilds.add(new TreeNode("child-"+st.getId()+"-"+s.getId()+"-"+ss.getId(),ss.getShop_standard_name(),"open",false,null));
                }

            }

        }
        //商品型別節點
stShopType.add(new TreeNode(st.getId(),st.getType_name(),"open",false,stChilds));
    }

    List<TreeNode> tree=new ArrayList<TreeNode>();
    tree.add(new TreeNode("0","所有商品","open",false,stShopType));
    return tree;
}

step3---返回object格式資料給前端：

/**
 * 查詢所有商品
 * @return
*/
@Action(PATH + "/queryShop")
public String queryShop() {
    try {
        object = DistriService.getInstance().queryTreeNode(_id);
    } catch (Exception e) {
        logger.error(e.getMessage());
    }
    return OBJECT;
}

step4----前端顯示(注意要匯入相關js)：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>easyui-tree</title><#include "/WEB-INF/comm/module-index.ftl"></head><body class="easyui-layout layout panel-noscroll"><div class="panel layout-panel layout-panel-center" style="width: 1322px; left: 0px; top: 0px;"><div data-options="border:false" region="center"><form id="myform" method="post" class="form" action=""><table><tr><td colspan="2"><ul class="treelist"><div><div style="float: left;width: 70px;"><label style="font-size: 14px;">關聯商品:</label></div></div><br><li>

<!--通過url請求後臺資料，easyui-tree的資料格式要特別注意-->
                                <ul class="easyui-tree" id="tt" style="margin: 4px 80px;" data-options="url:'queryShop',method:'post',animate:true,checkbox:true"></ul></li></ul></td></tr></table></form></div></div><script type="text/javascript">

    //這裡是在easyui-tree請求前設定引數
    $('#tt').tree({
        onBeforeLoad: function (node, param) {
            param._id= $("#distribution_type_id").val()
        }
    });

    //儲存資料
function save() {
//獲取樹形選單id,我要取的是規格id以及它的上級和上上級id,因為在顯示的時候就直接加了child來區分是否是規格id,並且在規格id上綁定了他的父級id,

//所以這邊直接獲取規格id拼接就可以了，我的業務需求是每一個規格id存一條資料，這邊傳字串過去，後臺接收拆分了就可以儲存啦
var nodes = $('#tt').tree('getChecked');
        var ids = new Array();
        var id;
        for(var i=0;i<nodes.length;i++){
            id=nodes[i].id;
            if(id.indexOf("child-")>-1) {
                ids.push(id.substring(6,id.length));
            }
        }

        if(ids.length<=0){
            top.showMsg("請選擇至少一個商品規格!");
            return false;
        }

$.ajax({
            url:"save",//請求的url地址
dataType:"json",//返回的格式為json
async:true,//請求是否非同步，預設true非同步，這是ajax的特性
data:{ids:ids.join(",")},//引數值
type:"post",//請求的方式
success:function(data){if (data.STATE) {
                    top.showMsg(data.MSG);
                } else {
                    top.showMsg(data.MSG);
                }
            },//請求成功的處理
error:function(){
                alert("請求異常!");
                console.error();
            }//請求出錯的處理
});}
</script></body></html>

step5---儲存就只有頁面獲取id的js,跳轉到後臺儲存的程式碼就不貼啦，繫結id的方法比較粗暴，將就看~~~easyui-tree我真的是頭疼。。。

easyui-tree資料讀取與儲存

easyui版本： jQuery EasyUI 1.4.3 工具：eclipse+mysql 注：程式碼有刪除，因為是公司專案，主要是easyui-tree的獲取及儲存表結構為：商品型別表(s

R 語言資料讀取與儲存

一、R語言讀取文字檔案： 1、檔案目錄操作：getwd() : 返回當前工作目錄setwd(“d:/data”) 更改工作目錄 2、常用的讀取指令readread.table() : 讀取文字檔案read.csv(): 讀取csv檔案如果出現缺失值，read.

Spark（五）資料讀取與儲存

目錄： 5、資料讀取與儲存 5.1、檔案格式 5.1.1、文字檔案 5.1.2、JSON 5.1.3、逗號分隔值與製表符分隔值 5.1.4、SequenceFile 5.1.5、物件檔案 5.2、檔案系統 5.2.1、本地/“常規”檔案系統 5.2.3、HDF

Spark--資料讀取與儲存

1、動機有時候資料量會大到本機可能無法儲存，這時就需要探索別的讀取和儲存方法了。 Spark支援很多種輸入源和輸出源。一部分原因是Spark本身是基於Hadoop生態圈二構建的，so spark可以通過Hadoop MapReduce 所使用的InputF

Go語言基礎（十五）—— Go語言實現json資料檔案讀取與儲存

案例： package main import ( "os" "fmt" "encoding/json" "time" ) type Person2 struct { Name string Age int Sex string Hobby []string } fun

python包-numpy資料讀取和儲存（二）

目錄 0.為什麼要使用numpy儲存資料 1.儲存為二進位制檔案(.npy/.npz)並讀取 numpy.save和numpy.load numpy.savez numpy.savez_compressed 2.儲存到文字檔案 numpy.savetxt nump

Python 檔案讀取與儲存

file1=open('pima-indians-diabetes.txt','r') file2=open('out.txt','w+') #data=file1.read() i=0 while True: line=file1.readline() tt='"'+line[

自定義XML格式讀取與儲存

背景本人頭一回寫部落格，請大家多多關照。通過讀取XML檔案獲取使用者管理許可權，其中涉及三部分： 1.XML檔案的生成； 2.XML檔案的讀取； 3.XML檔案的儲存；如何做第一步：自己先將XML檔案格式列出來。 XML格

iOS開發技巧之：相簿中的GIF圖片的讀取與儲存

大家都知道iOS的系統相簿是不支援gif圖片預覽的。但是，這並不代表系統相簿不能儲存和讀取gif圖片。通過Safari長按gif圖片，選擇儲存到相簿，這時儲存到相簿裡的圖片就是gif的，雖然它不會動。下面將介紹如何對系統相簿進行gif的讀取與儲存。什麼是 UTI iOS系統相

24位bmp影象的資料讀取&儲存

24位bmp檔案的讀取&儲存我採用的方法是將影象檔案讀取，儲存到一維陣列中，以便後期的操作。 void checkFileExist(FILE * fpbmp) { //開啟圖片檔案按照二進位制讀取

c++的基本資料型別與儲存結構（學生筆記）

資料型別： 1.基本型別：整型（int,bool,enum）,浮點型（float,double）,字元型（char） 2.結構型別：陣列（[ ]）,結構（struct）聯合（union）,類（class） 3.指標型別：（*） 4.空型別:（void）整形根據示數範圍分為：短整形（sh

OpenCV中影象顯示、讀取與儲存

眾所周知，opencv中的cv2.imread函式返回的影象資料，通道是BGR，而不是一般意義上的RGB；但是，這時如果用cv2.imshow進行顯示，看到的卻是正常的樣子；而如果用其他庫的顯示函式，如matplotlib的plt.imshow來顯示，則是異常的顯示，一般都是

opencv學習筆記一：影象讀取與儲存

影象讀取函式：cv2.imread(影象路徑，標誌符) 影象路勁可以是絕對路徑和相對路徑；識別符號有三種： cv2.IMREAD_COLOR （忽視透明度）； cv2.IMREAD_GRAYSCALE（轉換成灰度影象讀取）； cv2.IMREAD_UNCHANGE

Tensorflow基礎0：檔案的讀取與儲存

檔案讀取流程學習目標目標說明TensorFlow檔案讀取的流程應用無有四種獲取資料到TensorFlow程式的方法： tf.dataAPI：輕鬆構建複雜的輸入管道。（優

32、陣列的讀取與儲存

32、讀取與儲存 import numpy as np s1 = np.array(range(10)).reshape((2,5)) print(s1) np.save('./陣列',s1) 將s1 儲

Unity3d+Json多物件資料讀取與寫入+JsonUtility實現

這幾天做自己的培訓班的畢業專案，涉及到Json的讀取與寫入，本來想用LitJson的，後來發現5.3以後的版本有自帶的實現，而且很方便，配合System.IO就可以方便的實現，網上這方面資料也不少，但這裡給出更具體的實現，例如Json檔案中不只有一個物件，涉及

Flume+hbase 日誌資料採集與儲存

瞭解過flume的人，差不多都看過這張或則類似的圖片，本文即實現上圖部分內容。（由於條件有限，目前是單機上實現） flume-agent配置檔案 #flume agent conf source_agent.sources = server source_agent.si

opencv學習筆記（2）視訊檔案的讀取與儲存

main 函式輸入引數 argc、argv 的意義（參見[1]）在學習筆記（1）中最後寫到：“在Debug完成後，應該把原始影象放到專案資料夾的 debug 資料夾中，使影象與exe程式在同一資料夾內，才能在執行程式時正確讀入並顯示影象。”其實是有誤的，影象不一定要與

資料視覺化三步走（一）：資料採集與儲存，利用python爬蟲框架scrapy爬取網路資料並存儲

前言最近在研究python爬蟲，突然想寫部落格了，那就寫點東西吧。給自己定個小目標，做一個完整的簡單的資料視覺化的小專案，把整個相關技術鏈串聯起來，目的就是為了能夠對這塊有個系統的認識，具體設計思路如下： 1. 利用python爬蟲框架scr

python 讀取與儲存json

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它基於ECMAScript的一個子集。 JSON採用完全獨立於語言的文字格式，但是也使用了類似於C語言家族的習慣(包括C、C++、Java、JavaScript、P

easyui-tree資料讀取與儲存

相關推薦