允许用户更新 ColdFuson Cells

Question

我试图让我的 CFTABLE 可由用户编辑。 现在，我有一个表格输出表格，该表格基于我们数据库中的文档活动状态，通过他们选择单选选项。 go 关于使每个单元格可编辑的最佳方法是什么？ 最终，我希望用户能够编辑每个单元格，并将更改推送到我们的数据库。 我们曾经为此使用过 CFGRID。 但 CFGRID 不再有效。 我在想可能将其转换为数据表？ 想法？

当前页面的 OUTPUT：

代码：

<CFFORM ACTION=#cgi.SCRIPT_NAME# METHOD="POST">

    <center>
    
    <b><font size="4" face="britannic bold" color="black">Select if you want to view All, Active, or Non-Active Documents:</font></b><br><br>

    <table>
    <tr>
        <td align="center"><font size="4" face="britannic bold" color="black">Sort by:</font><br></td>
    </tr>
    <tr>
        <td align="left"><input type="Radio" NAME="order" value="All" checked>Active and Non-Active<br></td>
    </tr>
    <tr>
        <td align="left"><input type="Radio" NAME="order" value="Active">Active Only<br></td>
    </tr>
    <tr>
        <td align="left"><input type="Radio" NAME="order" value="Non-Active">Non-Active Only<br></td>
    </tr>
    </table>

    <tr><td>
    <br><INPUT TYPE="submit" NAME="view" VALUE="View Report">
    </td></tr>

    </center>

</CFFORM>


<cfif form.view is "View Report"> <!-- checks to see if view report button has been hit -->

    <cfif form.order is "All"> <!-- if Active and Non-Active button hit, it will display both types of documents -->
    <cftable query="get_all_docs" colheaders="yes" border="yes" headerlines="yes" htmltable="yes">

    <cfcol header="SITE" text="#SITE#">
    <cfcol header="section" text ="#sections#">
    <cfcol header="TAB" text="#TAB#">
    <cfcol header="DOC_NUMBER" text="#DOC_NUMBER#">
    <cfcol header="DESCRIPTION" text="#DESCRIPTION#">
    <cfcol header="REV_LEVEL" text="#REV_LEVEL#">
    <cfcol header="REVISION_DATE" text="#REVISION_DATE#">
    <cfcol header="REVIEW_DATE" text="#REVIEW_DATE#">
    <cfcol header="ADMIN" text="#ADMIN#">
    <cfcol header="ACTIVE" text="#ACTIVE#">

    </cftable>
    <!-- end All if -->

    <cfelseif form.order is "Active"> <!-- if Active Only is hit, will only display active docs -->
    <cftable query="active_doc" colheaders="yes" border="yes" headerlines="yes" htmltable="yes">

    <cfcol header="SITE" text="#SITE#">
    <cfcol header="section" text ="#sections#">
    <cfcol header="TAB" text="#TAB#">
    <cfcol header="DOC_NUMBER" text="#DOC_NUMBER#">
    <cfcol header="DESCRIPTION" text="#DESCRIPTION#">
    <cfcol header="REV_LEVEL" text="#REV_LEVEL#">
    <cfcol header="REVISION_DATE" text="#REVISION_DATE#">
    <cfcol header="REVIEW_DATE" text="#REVIEW_DATE#">
    <cfcol header="ADMIN" text="#ADMIN#">
    <cfcol header="ACTIVE" text="#ACTIVE#">

    </cftable>
    <!-- end Active elseif -->

    <cfelseif form.order is "Non-Active"> <!-- if Non-Active Only is hit, will only display non-active docs -->
    <cftable query="inactive_doc" colheaders="yes" border="yes" headerlines="yes" htmltable="yes">

    <cfcol header="SITE" text="#SITE#">
    <cfcol header="section" text ="#sections#">
    <cfcol header="TAB" text="#TAB#">
    <cfcol header="DOC_NUMBER" text="#DOC_NUMBER#">
    <cfcol header="DESCRIPTION" text="#DESCRIPTION#">
    <cfcol header="REV_LEVEL" text="#REV_LEVEL#">
    <cfcol header="REVISION_DATE" text="#REVISION_DATE#">
    <cfcol header="REVIEW_DATE" text="#REVIEW_DATE#">
    <cfcol header="ADMIN" text="#ADMIN#">
    <cfcol header="ACTIVE" text="#ACTIVE#">

    </cftable>
    <!-- end Non-Active elseif -->
    </cfif>
    <!-- end nested if statements  -->
</cfif>

更新数据库的路线：

<CFIF IsDefined("Form.FIRSTGRID.rowstatus.action") and isArray(Form.FIRSTGRID.rowstatus.action)>
  <cfloop index = "counter" from = "1" to = #arraylen(Form.FIRSTGRID.rowstatus.action)#>
    <cfswitch expression="#Form.FIRSTGRID.rowstatus.action[counter]#">
      <cfcase value="I">
         <cfquery name="query_insert" datasource="DBSTORE"> 

            insert into MDL_MASTER_LIST (active,admin,description,doc_number,is_contact,is_file,review_date,revision_date,rev_level,sections,site,tab)
            values ('#form.firstgrid.active[counter]#','#form.firstgrid.admin[counter]#','#form.firstgrid.description[counter]#',
            '#form.firstgrid.doc_number[counter]#',#form.firstgrid.is_contact[counter]#,#form.firstgrid.is_file[counter]#,
            #createodbcdate(form.firstgrid.review_date[counter])#,#createodbcdate(form.firstgrid.revision_date[counter])#,
            '#form.firstgrid.rev_level[counter]#','#form.firstgrid.sections[counter]#',
            '#form.firstgrid.site[counter]#','#form.firstgrid.tab[counter]#') 

         </cfquery>
      </cfcase>
      <cfcase value="D">
         <cfquery name="query_delete" datasource="DBSTORE">
            DELETE FROM MDL_MASTER_LIST WHERE doc_number = '#form.firstgrid.original.doc_number[counter]#'
         </cfquery>
      </cfcase>
      <cfcase value="U">  
         <cfquery name="query_update" datasource="DBSTORE">
            UPDATE MDL_MASTER_LIST set 
                active = '#form.firstgrid.active[counter]#',
                admin = '#form.firstgrid.admin[counter]#',
                description = '#form.firstgrid.description[counter]#',
                doc_number = '#form.firstgrid.doc_number[counter]#',
                is_contact = #form.firstgrid.is_contact[counter]#,
                is_file = #form.firstgrid.is_file[counter]#,
                review_date = #createodbcdate(form.firstgrid.review_date[counter])#,
                revision_date = #createodbcdate(form.firstgrid.revision_date[counter])#,
                rev_level = '#form.firstgrid.rev_level[counter]#',
                sections = '#form.firstgrid.sections[counter]#',
                site = '#form.firstgrid.site[counter]#',
                tab = '#form.firstgrid.tab[counter]#'
            WHERE doc_number = '#form.firstgrid.original.doc_number[counter]#'
         </cfquery>
      </cfcase>
    </cfswitch>
  </cfloop>
</CFIF>

感谢您的帮助，我是 coldfusion 的新手。 所以它总是一个学习曲线哈哈。

Answer 1

我可以想到一些你可以尝试的事情，但他们会非常参与 Javascript 和 Ajax。 这里远远超出 scope。 我的建议是找到一个已经构建的工具并根据您的需要进行调整。

这个页面上有很多东西可以查看

这是一款出色的商业产品： https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/

Answer 2

这是我开始使用 jquery 解决问题的基础：

桌子：

    <table id="MasterDocs">
<thead>
    <tr><th>SITE</th>
    <th>SECTIONS</th>
    <th>TAB</th>
    <th>DOC_NUMBER</th>
    <th>DESCRIPTION</th>
    <th>REV_LEVEL</th>
    <th>REVISION_DATE</th>
    <th>REVIEW_DATE</th>
    <th>ADMIN</th>
    <th>ACTIVE</th>
</tr></thead>
<tbody>
<cfoutput query="get_all_docs">
    <tr>
        <td>#SITE#</a></td>
        <td>#SECTIONS#</td>
        <td>#TAB#</td>
        <td>#DOC_NUMBER#</td>
        <td>#DESCRIPTION#</td>
        <td>#REV_LEVEL#</td>
        <td>#REVISION_DATE#</td>
        <td>#REVIEW_DATE#</td>
        <td>#ADMIN#</td>
        <td>#ACTIVE#</td>
    </tr>
    </cfoutput>
    
</tbody>

</table>

<script type="text/javascript">
    $(document).ready(function(){
        $('#MasterDocs').dataTable({
            "bJQueryUI": true,
            paging: false, // this allows you to pick if you want to filter by how many per page
            ordering: true, // this allows you to filter by col title
            info: false, // Will show "1 to n of n entries" Text at bottom
            
            "aoColumnDefs": [
                { "sWidth": 120, "sClass": "alignCenter", "aTargets": [ 1,3 ] },
                { "sWidth": 120, "sClass": "alignRight", "aTargets": [ 2 ] }
            ]
        });
    });
</script>

图书馆：

 <script type="text/javascript" src="./assets/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="./assets/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./assets/jquery.datatables.css"/>
    <link rel="stylesheet" type="text/css" href="./assets/table.css" />

谢谢大家的建议，它帮助我 go 朝着正确的方向发展。