Giter Club home page Giter Club logo

cattreelite's Introduction

CatTree Lite

  1. 目前提供六種資料輸入模式

    1. postMessage 輸入檢索頁面的 Cat 資料
    <script>
        var DocuSkySearchData = [
        {cue:'土地/-',cnt:'100', 'Mark': '124'},
        {cue:'宗教/嘗會/-',cnt:'12'}]
        //目前沒有實作 'Mark' 這個 porperty ,
        //在此只是展現未來的擴充性
    </script>
    
    1. postMessage 輸入一個 Tree JSON 檔案
    <script>
        var TreeStructureSample = [ {'id': '0', 'parent': '#', 'text': '淡新檔案客家事件分類', 'onclickDate': '666', url:'http://yahoo.com.tw'},
                                    {'id': '1', 'parent': '0', 'text': '土地', 'Mark': 'Test'},
                                    {'id': '2', 'parent': '1', 'text': '-', 'Mark':'123'},
                                    {'id': '3', 'parent': '2', 'text': '-'},
                                    {'id': '4', 'parent': '0', 'text': '宗教'},
                                    {'id': '5', 'parent': '4', 'text': '嘗會'},
                                    {'id': '6', 'parent': '5', 'text': '-'},
                                    ];
        // 'id' 為主識別
        // 'parent' 是用來對應父結點
        // 'parent': '#' 表示根目錄
        // 'text' 是顯示在節點上的文字
        // 有 'url' porperty 的資料,在點擊後會自動開啟該 url
    </script>
    
    1. postMessage 同時輸入檢索頁面的 Cat 資料以及一個 Tree JSON 檔案 在此模式下,會以 Tree JSON 檔案為底圖,把檢索頁面 Cat 資料嘗試對應到 Tree JSON,並填入數目。例如:接收 {cue:'宗教/嘗會/-',cnt:'12'} 此筆 Cat 資料,就會在相對應的節點顯示件數,在此為 12 件

    2. postMessage 輸入 Excel 資料,會顯示樹狀結構還有表單可以交互操作,輸入規範是下方 Sample Code 的 ExcelMessage

    3. 透過 url 讀取 JSON 並顯示,使用方式為: https://abc.com/?url=https://www.com.tw/1.json JSON 規範如同下方 Sample Code 的 postMessage 資料

    4. 若不透過 postMessage 傳入資料,單獨打開 CatTree 頁面,可以手動上傳 Excel 表單,請參閱 Excel 表單範例

  2. postMessage CatTreeMessage 輸入資料時,可以附帶一些選項,目前提供 title, theme, openTreeTerm, quantifierTerm, openTreeAll 等選項

    1. 提供 title,使用時機如下:
      1. 若有多棵樹,其切換按鈕名稱就是 title
      2. 若該棵樹只有輸入檢索頁面的 Cat 資料(DocuSkySearchData),其樹根名稱就是 title。
    2. 提供 theme,讓開發者可以切換 layout,目前提供 3 種 layout,分別是 original, proton, dark
    3. openTreeTerm 可以展開特定名稱的節點,例如:openTreeTerm : '故事',就會從根節點展開到 '故事'這個節點,若 node 同名,則同名的 node 都會展開。
    4. quantifierTerm 可以在 postMessage 輸入檢索頁面的 Cat 資料(DocuSkySearchData)時,更改量詞,例如:quantifierterm : '隻',則會以此量詞來顯示數量。
    5. openTreeAll 可以展開所有節點,例如:openTreeAll: true
  3. postMessage 以及透過 url 讀取 JSON 傳送資料為一個陣列(CatTreeMessage)或者一個物件(ExcelMessage)。CatTreeMessage 陣列每個 item 為一棵樹。ExcelMessage 物件是 Excel 表單資料。 Example CatTreeMessage:

<script>
    // postMessage 最後要傳送 CatTreeMessage
    var CatTreeMessage = [];
    // 輸入一個 Tree JSON 檔案
    var TreeStructureSample = [ {'id': '0', 'parent': '#', 'text': '淡新檔案客家事件分類', 'onclickDate': '666', url:'http://yahoo.com.tw'},
                                {'id': '1', 'parent': '0', 'text': '土地', 'Mark': 'Test'},
                                {'id': '2', 'parent': '1', 'text': '-', 'Mark':'123'},
                                {'id': '3', 'parent': '2', 'text': '-'},
                                {'id': '4', 'parent': '0', 'text': '宗教'},
                                {'id': '5', 'parent': '4', 'text': '嘗會'},
                                {'id': '6', 'parent': '5', 'text': '-'}];
    // 輸入檢索頁面的 Cat 資料
    var DocuSkySearchData = [{cue:'土地/-',cnt:'100',url:'http://yahoo.com.tw'},
                             {cue:'宗教/嘗會/-',cnt:'12'},
                             {cue:'宗教/廟宇/1', cnt:'122'},{cue:'宗教/廟宇/故事', cnt:'124'},
                             {cue:'宗教/廟1/故事', cnt:'125'},{cue:'N/N/N', cnt:'124'},
                             {cue:'-/1/-', cnt:'124'}];
    // Example 1
    CatTreeMessage[0] = {TreeStructure: JSON.parse(JSON.stringify(TreeStructureSample)),
                         title: '淡新檔案客家事件分類',
                         theme: 'dark',
                         openTreeTerm : '-'
                         }
    // Example 2
    CatTreeMessage[1] = {DocuSkySearch: JSON.parse(JSON.stringify(DocuSkySearchData)),
                         quantifierTerm: '很多件123',
                         openTreeTerm : '故事'
                         }
    // Example 3
    CatTreeMessage[2] = {DocuSkySearch: JSON.parse(JSON.stringify(DocuSkySearchData)),
                         title: '666',
                         quantifierTerm: '很多件123',
                         }
    // Example 4
    CatTreeMessage[3] = {TreeStructure: JSON.parse(JSON.stringify(TreeStructureSample)), DocuSkySearch: JSON.parse(JSON.stringify(DocuSkySearchData)),
                         title: '我就愛說中文',
                         theme: 'original',
                         quantifierTerm: '很多件啊啊啊234',
                         openTreeAll: true,
                         openTreeTerm : '嘗會'
                         }
</script>

Example ExcelMessage:

<script>
    // postMessage 最後要傳送 ExcelMessage
    ExcelMessage = {
        "第一棵分類樹": [
          { //第一筆資料
            // L 表示階層
            "1_id": "1",
            "L1": "民事",
            "L2": "田房",
            "L3": "霸佔",
            "3_text": "國立臺灣大學",
            "2_時間": "民國108年",
            "4_地點": "臺灣–臺北",
            "6_Url": "https://www.google.com",
            "5_RefId": "twgis_19291"
          },
          { //第二筆資料
            "1_id": "2",
            "L1": "民事",
            "L2": "田房",
            "L3": "爭界",
            "3_text": "國立清華大學",
            "2_時間": "民國109年",
            "4_地點": "臺灣–新竹",
            "6_Url": "http://140.112.114.10/",
            "5_RefId": "cbdb_196395"
          },
          {
            "1_id": "3",
            "L1": "民事",
            "L2": "田房",
            "L3": "爭界123",
            "L4": "-",
            "3_text": "國立交通大學",
            "2_時間": "民國110年",
            "4_地點": "臺灣–新竹",
            "5_RefId": "dila_A000294"
          },
          {
            "1_id": "4",
            "L1": "民事",
            "L2": "田房",
            "L4": "123",
            "3_text": "國立政治大學",
            "2_時間": "民國111年",
            "4_地點": "臺灣–臺北",
            "5_RefId": "hvd_70623"
          }
        ],
        "第二棵分類樹": [
          {
            "id": "1",
            "L1": "族群關係",
            "L2": "客家內部關係",
            "L3": "金錢糾紛",
            "text": "國立臺灣大學1",
            "時間": "民國108年",
            "地點": "臺灣–臺北",
            "IiifManifest": "https://iiif.lib.harvard.edu/manifests/ids:3098346"
          },
          {
            "id": "2",
            "L1": "民事",
            "L2": "田房",
            "L3": "爭界",
            "text": "國立清華大學1",
            "時間": "民國109年",
            "地點": "臺灣–新竹"
          },
          {
            "id": "3",
            "L1": "民事",
            "L2": "田房",
            "L3": "爭界",
            "text": "國立交通大學1",
            "時間": "民國110年",
            "地點": "臺灣–新竹"
          },
          {
            "id": "4",
            "L1": "族群關係",
            "L2": "客家內部關係",
            "L3": "金錢糾紛",
            "L4": "123",
            "text": "國立政治大學1",
            "時間": "民國111年",
            "地點": "臺灣–臺北"
          },
          {
            "id": "5",
            "L1": "社會組織",
            "L2": "拓墾組織",
            "text": "國立政治大學1",
            "時間": "民國111年",
            "地點": "臺灣–臺北"
          }
        ]
      }
</script>

cattreelite's People

Contributors

hcyuser avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.