做一個好看的頁面真的是一件困難的事情，所以還是遵循復制后修改的原則，首先是借鑒httpbin頁面的方式進行塊狀展開。

塊狀

從模版中找到類似的html代碼：

塊狀

我們可以看到一下它的動態效果，可以自主的展開和合攏。蠻符合我們的要求的

動畫效果

但是里面只有一行內容，我們需要在里面放一個類似表格的輸入框，所以繼續找到如下表格

表格形式

通過組合之后就符合我們的要求了。

大概展示的效果如下：

最終效果

感覺符合整體的畫風了。

下面來看看這一段讓人頭大的代碼從最前面部分開始好了，首先是接口名稱和它的輸入框

接口名稱

雖然丟人的使用了br來進行換行，但是從一個實用主義的角度來看，先這樣吧，不會CSS的我還能咋辦。

里面使用style="width: 30%; border-radius:5px;"來調整輸入框的大小為30%，輸入框是圓角的。之前的直角太硬了，看上去很不舒服。

然后是URL部分：

URL

請求方式： GETPOSTPUTDELETE 傳輸協議： httphttps

URL

這一部分實現了

當class是box box-default collapsed-box的時候橫條會自動隱藏，當box-header with-border的時候會自動顯示，這個當然是通過測試發現的，測試方法可以看如下動圖，分別是點擊小圖標后的顯示與隱藏導致的class變化

顯示與隱藏

感興趣可以通過查看監聽點擊操作查看JS干了什么事情

JS代碼查看方式

進到URL的內部可以看到一個，相當于自成一個小世界。

label標簽放展示的內容，input標簽放輸入框，select標簽放下拉框

經過多次的測試之后就會發現擺放好了。

請求頭部

請求頭部部分增加了+和-的操作，可以按照需要進行新增鍵值對，不過JS部分代碼還沒寫，所以這兩個只是個簡單的圖標而已

圖標

通過需改字體的大小就可以調整圖標的大小了：style="font-size:25px;"

其他部分自行查看github上的代碼吧～～

https://github.com/zx490336534/Zxapitest

歡迎關注我的公眾號：zx94_11

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js datagrid新增一行_Django接口新增页面编写_2（十五）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。