代码之家  ›  专栏  ›  技术社区  ›  Alex Childs

列上的自定义链接

  •  1
  • Alex Childs  · 技术社区  · 1 年前

    我正在使用django-tables2在页面上显示一些患者信息。我正在创建这样的表:

    class PatientListView(tables.Table):
        name = tables.Column('Practice')
        patientid = tables.Column()
        firstname = tables.Column()
        lastname = tables.Column()
        dob = tables.Column()
        addressline1 = tables.Column()
        addressline2 = tables.Column()
        city = tables.Column()
        state = tables.Column()
        zipcode = tables.Column()
    
        class Meta:
            template_name = 'django_tables2/bootstrap.html'
    

    然后我用sql查询的结果填充视图中的表,如下所示:

    table = PatientListView(patients)
    

    理想情况下,我想让表格的每一行都是可点击的,这样点击表格行上的任何地方都会带我到一个由我定义的单独的网址。我也愿意点击一个特定的单元格,这会带我去一个单独的网址。

    我见过linkify选项,但从我阅读的文档来看,linkify确实会重定向到django模型页面,但我并没有为此数据库使用模型,因为数据库是由另一个应用程序创建和管理的,我只是在阅读和显示这些信息。

    如果django-tables2不是这个问题的正确解决方案,我愿意听取其他实现目标的方法的建议。

    1 回复  |  直到 1 年前
        1
  •  1
  •   willeM_ Van Onsem    1 年前

    选项1:将每一列都转换为链接

    您可以创建一个可调用函数来转换 record 添加到链接中,并将其添加到所有列中,因此:

    def get_link(record):
        return f'www.example.com/patients/{record.patientid}'
    
    
    class PatientListView(tables.Table):
        name = tables.Column('Practice', linkify=get_link)
        patientid = tables.Column(linkify=get_link)
        firstname = tables.Column(linkify=get_link)
        lastname = tables.Column(linkify=get_link)
        dob = tables.Column(linkify=get_link)
        addressline1 = tables.Column(linkify=get_link)
        addressline2 = tables.Column(linkify=get_link)
        city = tables.Column(linkify=get_link)
        state = tables.Column(linkify=get_link)
        zipcode = tables.Column(linkify=get_link)
    
        class Meta:
            template_name = 'django_tables2/bootstrap.html'

    选项2:使行可点击

    另一种选择是生成 data-href 属性,然后使用JavaScript使其表现得像一个链接,使用:

    def get_link(record):
        return f'www.example.com/patients/{record.patientid}'
    
    
    class PatientListView(tables.Table):
        name = tables.Column('Practice')
        patientid = tables.Column()
        firstname = tables.Column()
        lastname = tables.Column()
        dob = tables.Column()
        addressline1 = tables.Column()
        addressline2 = tables.Column()
        city = tables.Column()
        state = tables.Column()
        zipcode = tables.Column()
    
        class Meta:
            row_attrs = {'data-link': get_link}

    然后添加一些JavaScript:

    $(function() {
        $('tr[data-href]').on('click', function() {
            window.location = $(this).data('href');
        });
    });
    

    也许可以用以下方式来设计行:

    tr[data-href] {
        cursor: pointer;
    }