python測試開發django-52.xadmin添加自定義的javascript（get_media）

前言

我想使用xadmin在列表頁每一行元素添加一個按鈕，當點擊這個按鈕的時候，能發個請求出去，后台執行相關功能。於是想到添加自定義的javascript腳本能實現。
在/stackoverflow上找到這篇https://stackoverflow.com/questions/35772623/how-to-add-custom-javascript-to-django-xadmin,
可能版本不對應，依然解決不了我的需求，大概知道重寫get_media方法可以解決。

實現功能

xadmin在列表頁每一行元素添加一個按鈕，當點擊這個按鈕的時候，能發個請求出去，后台執行相關功能，比如點執行按鈕時候，發個請求出去

添加按鈕，可以通過mark_safe方法插入html代碼實現，主要困難是加載自己寫的的javascript腳本了

get_media

在/xadmin/views/list.py目錄找到ListAdminView(ModelAdminView)類，主要是查看get_media方法的使用

# /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腳本

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)

javascript腳本

table頁html元素信息,每個"執行"按鈕分配一個id,onclick屬性傳一個動態的id參數

......
<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目錄下

;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);
                });
    }

注意前面要加個分號;要不然不生效