在Couch CMS中编辑自定义表格的最佳方法

时间:2014-12-17 18:57:32

标签: edit couch-cms

我的一个页面上有一个HTML表格,我想让它可以为我的客户编辑。它有一个工作方案,所以很好,如果它改变,他们可以自己编辑它。问题是表本身有一个ID,它包含在另外两个中。这对我运行的一些脚本和DOM操作是必要的。所以我不能让表格本身可编辑,但是让每个单元格成为一个可编辑的区域似乎有点过分。有没有更简单的方法?这是表格的必要HTML:

第一行(thead)不应该是可编辑的,但所有其他单元格都应该是可编辑的。这是in a fiddle

<div id="tables-wrapper">
    <div id="overflow-table">
        <table id="data-table">
            <thead>
                <tr>
                    <th></th>
                    <th>Maandag</th>
                    <th>Dinsdag</th>
                    <th>Woensdag</th>
                    <th>Donderdag</th>
                    <th>Vrijdag</th>
                </tr>
            </thead>
            <tr>
                <td>Vrije raadpleging
                    <br>8u30 tot 10u30</td>
                <td>Dr. Z
                    <br>Dr. Y</td>
                <td>Dr. Z</td>
                <td>Dr. Y</td>
                <td>Dr. X</td>
                <td>Dr. Y</td>
            </tr>
            <tr>
                <td>Ochtend
                    <br><strong>op afspraak</strong>

                </td>
                <td></td>
                <td>Dr. Y</td>
                <td></td>
                <td></td>
                <td>Dr. X</td>
            </tr>
            <tr>
                <td>Namiddag en/of avond
                    <br><strong>op afspraak</strong>

                </td>
                <td>Dr. X
                    <br>Dr. Y</td>
                <td>Dr. Z
                    <br>Dr. X</td>
                <td>Dr. Z
                    <br>Dr. Y</td>
                <td>Dr. X
                    <br>Dr. Y
                    <br>Dr. Z</td>
                <td>Dr. Y
                    <br>Dr. X</td>
            </tr>
            <tr>
                <td>Vrije raadpleging
                    <br>van 17u30 tot 19u</td>
                <td>Dr. Y</td>
                <td>Dr. Z</td>
                <td>Dr. X</td>
                <td>Dr. Y</td>
                <td>Dr. X</td>
            </tr>
        </table>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

这似乎是“可重复区域”的完美案例 - http://www.couchcms.com/docs/concepts/repeatable-regions.html

定义六个'text'或'textarea'类型的可编辑区域(每个区域一个&lt; TD&gt;),它们使它们可重复。

这样,用户可以根据需要添加尽可能多的行,同时能够编辑每一行中的每个单元格。

在前端,使用cms:show_repeatable循环遍历行/单元格并重新创建HTML表格。

希望这有帮助。

答案 1 :(得分:0)

@Bram Varoy:我不知道这是否会有这么晚的使用,但是,想到要回答这个问题。

这应该是您的PHP文件内容:

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Doctor Appointment Schedule'>
    <cms:repeatable name='da_appt' label='Doctors Appointment - Slots' >
        <cms:editable name='da_appt_type' label='Slots - Type' type='text' />
        <cms:editable name='da_appt_mon' label='Slots - Mon' type='text' />
        <cms:editable name='da_appt_tue' label='Slots - Tue' type='text' />
        <cms:editable name='da_appt_wed' label='Slots - Wed' type='text' />
        <cms:editable name='da_appt_thu' label='Slots - Thu' type='text' />
        <cms:editable name='da_appt_fri' label='Slots - Fri' type='text' />
    </cms:repeatable>
</cms:template>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id="tables-wrapper">
    <div id="overflow-table">
        <table id="data-table" border="1">
            <thead>
                <tr>
                    <th></th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                </tr>
            </thead>
            <cms:show_repeatable 'da_appt'>
            <tr>
                <td><cms:show da_appt_type /></td>
                <td><cms:show da_appt_mon /></td>
                <td><cms:show da_appt_tue /></td>
                <td><cms:show da_appt_wed /></td>
                <td><cms:show da_appt_thu /></td>
                <td><cms:show da_appt_fri /></td>
            </tr>
            </cms:show_repeatable>
        </table>
    </div>
</div>
</body>
</html>
<?php COUCH::invoke(); ?>

您可以在

的name =''中为变量添加任何名称