Skip to Content

將 CheckBox 嵌入 TableView 中使用

在看此篇之前,一些基本的重點要先參考「Mac Cocoa NSTableView 程式與綁定
 
這一段是記錄把 CheckBox 放在 TableView 中使用所遇到的一些狀況。

這是一個標準的 Column 設計。

首先把紅色的部份移除,換成 CheckBox,如下圖。

註:其實還有一種方法,就是不移除 Table Cell View,只移除 Table View Cell,然後用 CheckBox 取代 Table View Cell。底下程式也會需要修改。

然後設定 CheckBox 的 Identifier,本例為 tableCheck。

底下是程式呈現的片段。

// 資料來源

var data1: [String] = ["abc","123","xyz"]

 

@IBOutlet weak var table: NSTableView!

 

override func viewDidLoad() {

    super.viewDidLoad()

    table.dataSource = self

    table.delegate = self

}

 

...略...

    

// 傳回有多少資料

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

   return data1.count

}

   

// 傳回資料

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

 

   let view = table.makeView(withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "tableCheck") , owner: self) as! NSButton

    view.title = data1[row]

    return view

}

 

註:如果沒有移除 Table Cell View,而 CheckBox 是在它的下層,則上面的程式變成如下,也就是利用 subviews[0] 找到下層的 CheckBox。最底下程式也是類似處理,就不一一說明了。

// 傳回資料

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

 

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

    let checkbox = view.subviews[0] as! NSButton

    checkbox.title = data1[row]

    return view

}

 

這是呈現畫面。

此時有一個問題,若點選 CheckBox,CheckBox 會有作用,但不會有選擇到 TableView 該列的事件發生。同樣的,若點選 CheckBox 文字後面的空間,雖然會發生 TableView 該列被選取,但 CheckBox 不會有點選的反應。

如果要解決這二件事,就要分別處理 TableView Click 和 CheckBox Click。

這一段是處理 TableView Click,先找到點選該行的 CheckBox,然後更改 CheckBox 的狀態。

 

@IBAction func tableClick(_ sender: Any) {

    let i = table.selectedRow

    if i == -1 { return }

    let checkBox = table.view(atColumn: 0, row: i, makeIfNecessary: false) as! NSButton

    if checkBox.state == .on {

        checkBox.state = .off

    } else {

        checkBox.state = .on

    }

}

 

這一段是處理 CheckBox 的 Click,點選之後會先找到所在的列數,再轉換成 index,再將此 index 所在列設定為選取狀態。

 

@IBAction func checkBoxClick(_ sender: Any) {

    let row = table.row(for: sender as! NSView)

    let index = NSIndexSet(index: row)

    table.selectRowIndexes(index as IndexSet, byExtendingSelection: false)

}

 

最後,若只想操作 CheckBox,不想看選取列有突顯的顏色,將 TableView 的 Highlight 選擇 None 即可。如此一來,也不用處理上面提到 CheckBox Click 之後選取列的設定了。

 
還有一種方法,就是在 Table Column 裡面改成放置 Check Box Cell,此時 TableView 會自動切換成 Cell Based,這時就要用 NSCell 的方式處理,但傳回的資料並不是 CheckBox 的 Title,而是其內容,好像是大於 0 的數字就表示選取 CheckBox,在使用上比較不彈性。
 
似乎是 XXX Cell 的元件都可以如此處理。

 

 
 
 

回應

發表新回應

這個欄位的內容會保密,不會公開顯示。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。
  • 可使用的 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