DTCMS插件的製做實例電子資源管理（二）Admin後臺頁面編寫

     

總目錄

• 插件目錄結構（一）
• Admin後臺頁面編寫（二）
• 前臺模板頁編寫（三）
• URL重寫（四）

       

本實例旨在以一個實際的項目中的例子來介紹如何在dtcms中製做插件，本系列文章非入門教程，部分邏輯實現一帶而過，敬請諒解。

項目要求是在dtcms中增長一個電子資源管理，而且提供靈活的篩選方式。

因爲涉及內容比較多，打算分4個部分來描述，內容頁是我本身一點一點摸索出來的，在原有的基礎上進行開發已是第3次了，這一次對插件製做進一步理解深入，同時經過不斷的調試摸透了URL重寫的規則。

本章目錄

• 後臺列表頁實現
• 後臺詳情頁實現

1、後臺列表頁實現

上一節咱們新建項目的時候已經新建過一個admin/index.aspx頁面了，也修改過相關對應的命名空間，下面咱們就實現後臺列表頁的效果，最終效果以下圖

1.後臺服務器代碼

首先是後臺服務器代碼，由於咱們是複製的友情連接的代碼，因此大部分代碼是能夠重用的，只要把對應的取數據庫的地方修改一下便可，按照頁面加載的順序和功能的順序，咱們一個一個函數的修改

2.pageload函數

檢查權限的地方，必定要記得修改爲plugin.config裏設置的後臺菜單的name，不然設置的權限沒有效果。

3.RptBind函數

這個函數是最主要的數據獲取函數，這裏獲取數據庫數據的代碼我就不貼了，數據庫訪問我用的是newlife.xcoder，本系列不是一個入門教程，敬請諒解。

4. lbtnDelete_Click函數

這個函數也要注意修改權限的名字，刪除的核心仍是用的newlife.xcoder，是否是很簡單的樣子。

5.txtPageNum_TextChanged函數和GetPageSize函數

這兩個函數的主要做用是設置一頁顯示多少條數據，主要是紅框框起來的name要保持一致。

6. 下面是前臺html代碼的修改

• 這裏前臺html涉及的內容比較多，比較細，可能會漏掉一些東西，首先是head部分，除了title其餘都不用修改，這裏就不截圖了。
• 導航欄，修改一下中文顯示的文字便可
• 工具欄這裏是加了一個新增的按鈕

7.前臺列表綁定的修改

最重要的其實仍是前臺列表綁定的修改，用這樣的關鍵詞進行綁定

<%#Eval("PropertyNames")%>

至此後臺的列表頁就完成了，還有其餘一些沒能詳述的地方各位本身再修改一下便可。

2、後臺詳情頁實現

同第一個列表頁，咱們一樣須要從別的地方複製一個頁面過來，這裏仍是用友情連接的詳情頁，複製過來後修改一下命名空間。

1.詳情頁的pageload函數

詳情頁的pageload函數，和列表頁差很少，注意權限的字段修改下，其餘的按照本身的邏輯，編輯的話就要綁定數據，新增的話直接展現頁面便可。

2.詳情頁的前端驗證

詳情頁後端不復雜，主要是前端驗證這裏，碰到了一些問題這裏提一下，數據庫有3個連接，但只有連接1是必填項，後面兩個能夠填也能夠不填，因此這裏驗證非空能夠用ignore的屬性。

這個屬性的來源是在頁面加載的時候調用了validform這個js組件，這個js驗證仍是挺好用的，具體的使用方法能夠搜索一下網上的教程。

3.單選多選框樣式

DTcms的後臺用的單選多選框的風格仍是比較好看的，那麼本身寫一個單選多選框如何也能變成這種樣式呢？以下圖所示，注意紅框框起的地方，只要用div class爲rule-multi-radio和rule-multi-checkbox包起來的單選和複選控件便可。

具體的實現是經過common.js裏的初始化設置。

4.富文本編輯器

DTcms裏用的富文本編輯器是kindeditor，頁面裏用textarea包起來，設置class爲editor，後臺經過txtContent.Value來設置和讀取值

而後經過js來加載，這裏uplaodjson和filemanagerjson都不用修改，只要設置對路徑便可，就能使用圖片上傳和圖片管理功能。

5. btnSubmit_Click函數

最後在搞定btnSubmit_Click函數作好保存和權限驗證便可。

至此，後臺的列表頁和詳情頁都製做完成了