Máy ghi trăn

Kể từ một bài đăng trước trên trình lập bảng, tôi đã nghiên cứu một số tính năng để sử dụng các thành phần đe trong các ô của trình lập bảng, mà tôi nghĩ có thể xứng đáng với bài đăng của riêng mình

Tích hợp lưới dữ liệu Javascript dạng bảng - #9 của stucork

Tabulator là một thư viện javascript - tương tự như lưới dữ liệu đe - nó tồn tại lâu hơn lưới dữ liệu đe nên có một số tính năng và ưu điểm bổ sung

lợi thế nội trú

• nó có vẻ nhanh hơn để kết xuất
• nó có các tính năng tuyệt vời [lọc, sắp xếp, nhóm, bộ chọn kích thước phân trang, trang hiện tại]
• tự động thêm và xóa hàng

nhược điểm

• các thành phần của ô được giới hạn ở formatters/editors có sẵn được cung cấp bởi trình lập bảng [trừ khi bạn thích viết của riêng mình trong javascript
• trong khi các hàng lưới dữ liệu đe cho phép các thành phần tùy chỉnh và quy trình làm việc của python

vì vậy tôi nghĩ sẽ rất tuyệt nếu có thể kết hợp những ưu điểm của trình lập bảng với các thành phần tùy chỉnh từ Anvil.

Dưới đây, bạn có thể thấy 3 thành phần ô tùy chỉnh là thành phần đe và biểu mẫu

dUI1tczbk4887×547 378 KB

Làm thế nào nó hoạt động?

• khi bạn thiết lập một trình lập bảng, bạn cung cấp column details dưới dạng danh sách các ký tự

có thể tìm thấy các phím cột trong tài liệu lập bảng nhưng một số bao gồm

• đồng ruộng
• chức vụ
• bộ định dạng [thành phần để hiển thị]
• trình chỉnh sửa [thành phần hiển thị khi ô được nhấp]

    from ..DOB import DOB
    from ..FavColor import FavColor
    
    self.tabulator.columns = [
...
      {'title':"Favourite Color", 'field':"col", 'editor':FavColor},
      {'title':"Date Of Birth", 'field':"dob",  'editor': DOB,   'align':"center", 'sorter':"date"},
...
      {'field':'delete', 'formatter': Link, 'formatterParams':{'icon':'fa:trash', 
                                                               'foreground':'indianred', 
                                                               'spacing_above': 'none', 
                                                               'spacing_below':'none'} , 'width': 40, 'headerSort':False}
    ]
    

Trên đây là các cột có Thành phần Anvil tùy chỉnh…

thành phần xóa Link không thực sự làm bất cứ điều gì ngoài việc trông giống như một biểu tượng thùng rác
bộ ghi nhật ký có một sự kiện cell_clicked và mã như sau

  def tabulator_cell_click[self, **event_args]:
    """This method is called when a cell is clicked - event_args include field and row"""
    if event_args['field'] == 'delete':
        c = confirm['are you sure you want to delete this row?']
        if c:
          self.tabulator.delete_row[event_args['row']['id']]

Hình thức DOB thú vị hơn

• Biểu mẫu

    def tabulator_cell_click[self, **event_args]:
      """This method is called when a cell is clicked - event_args include field and row"""
      if event_args['field'] == 'delete':
          c = confirm['are you sure you want to delete this row?']
          if c:
            self.tabulator.delete_row[event_args['row']['id']]
  

  0 là một bảng trống với thành phần bộ đếm ngày tháng
• thuộc tính

    def tabulator_cell_click[self, **event_args]:
      """This method is called when a cell is clicked - event_args include field and row"""
      if event_args['field'] == 'delete':
          c = confirm['are you sure you want to delete this row?']
          if c:
            self.tabulator.delete_row[event_args['row']['id']]
  

  1 của nó được đặt thành

    def tabulator_cell_click[self, **event_args]:
      """This method is called when a cell is clicked - event_args include field and row"""
      if event_args['field'] == 'delete':
          c = confirm['are you sure you want to delete this row?']
          if c:
            self.tabulator.delete_row[event_args['row']['id']]
  

  2
• nó đặt thuộc tính

    def tabulator_cell_click[self, **event_args]:
      """This method is called when a cell is clicked - event_args include field and row"""
      if event_args['field'] == 'delete':
          c = confirm['are you sure you want to delete this row?']
          if c:
            self.tabulator.delete_row[event_args['row']['id']]
  

  3 dựa trên

    def tabulator_cell_click[self, **event_args]:
      """This method is called when a cell is clicked - event_args include field and row"""
      if event_args['field'] == 'delete':
          c = confirm['are you sure you want to delete this row?']
          if c:
            self.tabulator.delete_row[event_args['row']['id']]
  

  4 bằng cách sử dụng cơ sở dữ liệu
• thay đổi nó
  • cuộc gọi

      def tabulator_cell_click[self, **event_args]:
        """This method is called when a cell is clicked - event_args include field and row"""
        if event_args['field'] == 'delete':
            c = confirm['are you sure you want to delete this row?']
            if c:
              self.tabulator.delete_row[event_args['row']['id']]
    

    5 [cha mẹ là thành phần

      def tabulator_cell_click[self, **event_args]:
        """This method is called when a cell is clicked - event_args include field and row"""
        if event_args['field'] == 'delete':
            c = confirm['are you sure you want to delete this row?']
            if c:
              self.tabulator.delete_row[event_args['row']['id']]
    

    6]
  • làm tăng sự kiện

      def tabulator_cell_click[self, **event_args]:
        """This method is called when a cell is clicked - event_args include field and row"""
        if event_args['field'] == 'delete':
            c = confirm['are you sure you want to delete this row?']
            if c:
              self.tabulator.delete_row[event_args['row']['id']]
    

    7

Đây là Phụ thuộc và Ví dụ nếu bạn muốn khám phá mã nhiều hơn ...

https. // ví dụ-tab. cái đe. ứng dụng # ví dụ trực tiếp

@david. Wylie và tôi đã sử dụng nó trong các dự án của chúng tôi

Nếu bạn đã kết thúc việc sử dụng nó - Vui lòng yêu cầu bất kỳ tính năng nào hoặc đặt bất kỳ câu hỏi nào...

Một cập nhật nhỏ về điều này vì tôi đã sử dụng nó trong một dự án và đã nâng cao tính năng của trình định dạng tùy chỉnh - giờ đây bạn có thể sử dụng một hàm trả về một thành phần…

lấy cảm hứng từ @meredydd hiển thị và cho biết lưới dữ liệu gốc [trước khi lưới dữ liệu tồn tại trong đe…]

Xin chào tất cả, tôi biết rằng lưới dữ liệu hiện là tính năng được yêu cầu nhiều nhất của chúng tôi - và chúng tôi đang nghiên cứu tính năng này. Tuy nhiên, trong thời gian chờ đợi, hãy để tôi cho bạn thấy bạn có thể làm được bao nhiêu với thành phần tùy chỉnh Anvil. Để trả lời câu hỏi trên một chủ đề khác, tôi đã tạo biểu mẫu HTML tùy chỉnh để tạo bảng trong HTML. Đây rồi [NB đã cập nhật liên kết]. Đó là một thành phần tùy chỉnh và bạn sử dụng nó như thế này. bản thân. Bảng 1. cột = ["Tên", "Tuổi"] tự. Bảng 1. dữ liệu = [{'Tên'. 'Alice', 'Tuổi'. 2}…

ví dụ đơn giản

đặt trình định dạng cột thành một

  def tabulator_cell_click[self, **event_args]:
    """This method is called when a cell is clicked - event_args include field and row"""
    if event_args['field'] == 'delete':
        c = confirm['are you sure you want to delete this row?']
        if c:
          self.tabulator.delete_row[event_args['row']['id']]

  def tabulator_cell_click[self, **event_args]:
    """This method is called when a cell is clicked - event_args include field and row"""
    if event_args['field'] == 'delete':
        c = confirm['are you sure you want to delete this row?']
        if c:
          self.tabulator.delete_row[event_args['row']['id']]

self.columns = [
...
    {'title':"Name", 'field':'name', 'formatter': self.name_foramtter}

...
]

# must include a row argument and **kwargs
def name_formatter[self, row, **params]:
  def link_click[**event_args]:
    print[row]
  link = Link[text = row['name']]
  link.set_event_handler['click', link_click]
  # return a component
  return link

self.columns = [
...
    {'title':"Name", 'field':'name', 'formatter': self.name_foramtter}

...
]

# must include a row argument and **kwargs
def name_formatter[self, row, **params]:
  def link_click[**event_args]:
    print[row]
  link = Link[text = row['name']]
  link.set_event_handler['click', link_click]
  # return a component
  return link

sâu hơn

Trường hợp sử dụng của tôi là một ô có 5 biểu tượng trạng thái
khi biểu tượng trạng thái được nhấp vào, nó sẽ cập nhật cơ sở dữ liệu và thay đổi màu sắc tương ứng...

class Form[FormTemplate]:
  def __init__[self, **properties]:
    self.columns = [
        ...
        {'title':"Status", 'field':'status', 'formatter': self.status}
        ...
    ]

self.columns = [
...
    {'title':"Name", 'field':'name', 'formatter': self.name_foramtter}

...
]

# must include a row argument and **kwargs
def name_formatter[self, row, **params]:
  def link_click[**event_args]:
    print[row]
  link = Link[text = row['name']]
  link.set_event_handler['click', link_click]
  # return a component
  return link

  def tabulator_cell_click[self, **event_args]:
    """This method is called when a cell is clicked - event_args include field and row"""
    if event_args['field'] == 'delete':
        c = confirm['are you sure you want to delete this row?']
        if c:
          self.tabulator.delete_row[event_args['row']['id']]

self.columns = [
...
    {'title':"Name", 'field':'name', 'formatter': self.name_foramtter}

...
]

# must include a row argument and **kwargs
def name_formatter[self, row, **params]:
  def link_click[**event_args]:
    print[row]
  link = Link[text = row['name']]
  link.set_event_handler['click', link_click]
  # return a component
  return link

self.columns = [
...
    {'title':"Name", 'field':'name', 'formatter': self.name_foramtter}

...
]

# must include a row argument and **kwargs
def name_formatter[self, row, **params]:
  def link_click[**event_args]:
    print[row]
  link = Link[text = row['name']]
  link.set_event_handler['click', link_click]
  # return a component
  return link

  icons    = ['fa:ban', 'fa:exchange',  'fa:database',   'fa:envelope', 'fa:check']
  spacing = dict[spacing_above='none', spacing_below='none']
  
  def status[self, row, **kwargs]:

    def status_clicked[sender, **event_args]:
      for link in links[sender.tag+1:]:
        link.foreground = "theme:Gray 300"
      for link in links[:sender.tag+1]:
        color = f"theme:{sender.tag}" # colors defined in theme
        link.foreground = color
      if row['status'] != sender.tag:
        row['status'] = sender.tag
        self.tabulator.update_row[row['id'], row]
        anvil.server.call_s['update_row', row]

      
    panel = FlowPanel[**self.spacing]
    links = []
    current_status = row['status']
    current_link = None
    for i,icon in enumerate[self.icons]:
      link = Link[icon=icon, tag=i, **self.spacing]
      panel.add_component[link]
      links.append[link]
      link.set_event_handler['click', status_clicked]
      if current_status == i:
        current_link = link
    status_clicked[sender=current_link]
    
    # return a component to be rendered for the cell
    return panel

Điều này cũng có thể xảy ra với một biểu mẫu và cơ sở dữ liệu - nhưng đôi khi tôi thấy cơ sở dữ liệu hơi chậm và thật tuyệt khi chỉ làm một cái gì đó trong mã ...