Skip to Content

Mac Cocoa NSTableView 程式與綁定

經過這兩篇「NSOutlineView 使用程式呈現樹狀資料」、「Mac Cocoa NSOutlineView 資料綁定」的練習,這次直接處理 NSTableView,果然駕輕就熟,稍為查一些資料,很快就做出成果了,畢竟它比 NSOutlineView 簡單,基本架構都差不多。

這篇就不談太多細節,只把重點記錄下來。

資料綁定

先由資料綁定做起。

準備資料

TableView 是表格狀的資料,所以就用藏經目錄的結構來處理,底下只有三個欄位,ID、經名與作譯者。

宣告 catalog 變數,它是 Catalog 物件的陣列,底下建立了三筆資料。

綁定元件

處理 NSOutlineView 時,要先拉取 Tree Controller 來當成綁定的控制器,處理 NSTableView 我就拉取 Array Controller 來測試。

因為資料有三個欄位,所以 Table View 也要改成三欄,在屬性中就可以找到。

Array Controller 同樣 Bind to 選擇 View Controller,Model Key Path 則填入 self.catalog。

接著綁定 Table View,Bind to 選 Array Controller,Controller Key 保留 arrangedObjects。Model Key Path 則不填,我依然不了解這裡的意思。

第一個 Table View Cell (別選錯了) Bind to 選 Table Cell View,Model Key Path 填入 objectValue.id。

第二個與第三個 Table View Cell 則分別綁定 objectValue.name 和 objectValue.byline,如此三欄就綁定完成了。

執行結果

執行結果成功。

處理 Click 事件

把 Table View 拉一個 Outlet 到 ViewController,命名為 tableView。

由 Storyboard 的 Table View 拉 Action 到 ViewController,程式碼如下:

結果如下,右邊是依順序點選的結果。

程式處理

再來用程式來處理 TableView。

設定元件

再拉一個 Table View 元件,資料還是用同樣的內容。

第二個 Table View 拉一個 Outlet 到 ViewController,命名為 tableView2。

回到 Storyboard,選第一個 Column,Identifier 命名為 column1。

第二、第三 Column 同樣命名為 column2, column3。

再選第一個 Table Cell View,將 Identifier 命令為 MyView,這個在程式會用到。

撰寫程式

先設定 tableView2 的資料來源和代理。

接著撰寫相關程式。

NSOutlineView 有四組程式要處理,NSTableView 比較少,只有二組,分別是 numberOfRows(tableView) 和 tableView(tableView:viewFortableColumn:row:)。

程式和說明如下。

 

extension ViewController: NSTableViewDelegate, NSTableViewDataSource {

    

    // 傳回有多少資料

    func numberOfRows(in tableView: NSTableView) -> Int {

        return catalog.count

    }

    

    // 傳回資料

    func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {

 

        // 由 MyView 產生新的 NSView (NSTableCellView)

        let view = tableView2.makeView(withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "MyView") , owner: self) as! NSTableCellView

        

        // 呈現的文字

        var text = ""

 

        // 判斷目前在哪一個欄位,呈現的內容會不同

        switch tableColumn!.identifier.rawValue {

            case "column1":

                text = catalog[row].id

            case "column2":

                text = catalog[row].name

            case "column3":

                text = catalog[row].byline

            default:

                break

        }

 

        // 將文字填入 View 中

        view.textField?.stringValue = text

        

        return view

    }

}

執行結果

執行結果成功。

 

回應

發表新回應

這個欄位的內容會保密,不會公開顯示。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。
  • 可使用的 HTML 標籤:<a> <address> <b> <blockquote> <br> <caption> <center> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <ins> <li> <ol> <p> <pre> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <th> <tr> <u> <ul>
    Allowed Style properties: background, background-attachment, background-color, background-image, background-position, background-repeat, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, bottom, caption-side, clip, color, direction, empty-cells, font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, height, left, letter-spacing, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, overflow, padding, padding-bottom, padding-left, padding-right, padding-top, right, table-layout, text-align, text-decoration, text-indent, text-transform, top, unicode-bidi, vertical-align, white-space, width, word-spacing, z-index

更多關於格式選項的資訊

CAPTCHA
驗證碼只有阿拉伯數字, 這是躲廣告用的, 麻煩你輸入了.
Image CAPTCHA
Enter the characters shown in the image.


story | about seo