我想使用xadmin在列表頁每一行元素添加一個按鈕,當點擊這個按鈕的時候,能發個請求出去,後臺執行相關功能。因而想到添加自定義的javascript腳本能實現。
在/stackoverflow上找到這篇https://stackoverflow.com/questions/35772623/how-to-add-custom-javascript-to-django-xadmin,
可能版本不對應,依然解決不了個人需求,大概知道重寫get_media方法能夠解決。javascript
xadmin在列表頁每一行元素添加一個按鈕,當點擊這個按鈕的時候,能發個請求出去,後臺執行相關功能,好比點執行按鈕時候,發個請求出去css
添加按鈕,能夠經過mark_safe方法插入html代碼實現,主要困難是加載本身寫的的javascript腳本了html
在/xadmin/views/list.py目錄找到ListAdminView(ModelAdminView)類,主要是查看get_media方法的使用java
# /xadmin/views/list.py # Media @filter_hook def get_media(self): media = super(ListAdminView, self).get_media() + self.vendor('xadmin.page.list.js', 'xadmin.page.form.js') if self.list_display_links_details: media += self.vendor('xadmin.plugin.details.js', 'xadmin.form.css') return media
在xadmin.py代碼以下,使用self.vendor('xadmin.list.xxx.js', 'xadmin.form.css')加載自定義的xadmin.list.xxx.js腳本django
class ControlImage(object): # 顯示 做者:上海-悠悠 list_display = ['name', 'url', 'add_time', '操做'] def 操做(self, obj): # button = '<button id="", type="submit" class="default btn btn-primary hide-xs" name="_delete" data-loading-text="刪除"><i class="fa fa-save"></i>刪除</button>' button = '<p id="%s" class="default btn btn-primary hide-xs" onclick="click_action_info(\'%s\')">執行</p>'%(str(obj.name),str(obj.name)) r = mark_safe(button) return r def get_media(self): # media is the parent's return value (modified by any plugins) media = super(ControlImage, self).get_media() + self.vendor('xadmin.page.list.js', 'xadmin.page.form.js') # if self.list_display_links_details: # media += self.vendor('xadmin.plugin.details.js', 'xadmin.form.css') # xadmin.list.xxx.js是本身寫的js腳本 media += self.vendor('xadmin.list.xxx.js', 'xadmin.form.css') return media # media = super(ControlImage,self).get_media() # media.add_js(('js/content.js',)) # 這種方法行不通,會報找不到.add_js方法 # return media xadmin.site.register(UploadImage, ControlImage)
table頁html元素信息,每一個"執行"按鈕分配一個id,onclick屬性傳一個動態的id參數ide
...... <p id="11111" class="default btn btn-primary hide-xs" onclick="click_action_info('11111')">執行</p> ...... <p id="yoyo1" class="default btn btn-primary hide-xs" onclick="click_action_info('yoyo1')">執行</p> ...... <p id="yoyo2" class="default btn btn-primary hide-xs" onclick="click_action_info('yoyo1')">執行</p>
接下來把本身寫的javascript腳本放到/xadmin/static/xadmin/js目錄下url
;function click_action_info(id){ var x=id $.get("/weather_code/", //做者:上海-悠悠 { city: x, time: "2019-04-05" }, function (result) { alert("返回數據: \n" +x +"\n" + "reason:" + result.reason + "\n" + "weather_name:" + result.weather_name); }); }
注意前面要加個分號(;),要否則不生效code