EazyUI_Datagrid_行內編輯(editor)的combobox下拉框帶圖片

1.業務需求: 商品的明細列表里面下拉框需要 [圖片+文字 ] 顯示

2.我們使用的是EazyUI,而我比較懶,不習慣用拼接html來顯示列表頁面,使用的是eazyui的數據網格(datagrid)

3.關鍵代碼如下

 

     ①注意 :網上查資料,搜索"eazyui下拉框帶圖片",有些方法做法是在[1]處格式化return <img>+文字;

       但是我使用的是datagrid單元格里面的下拉框,跟普通的combobox不太一樣,參考官網后發現格式化應該在editor里面,也就是formatItem,

        <script type="text/javascript">

    //格式化下拉選項框帶圖片
    function formatItem(row) {
        if (row.file_url) {
            return '<img class="item-img" src="' + row.file_url + '"/>' + ' ' + row.text;
        } else {
            return row.text;
        }
    }
  </script>

     ②****** 這個row很關鍵, 下拉選項的每一行option都是row 

         ****** file_url表示文件路徑了,我這里是文件服務器路徑 http:xxxx.jpg

      

 

③  后台數據格式:   我使用的是JSONArray里面,添加JSONObject的方式返回數據類型,

 

 4.總結:  官網的可靠性 > 網上資料,兩者結合印證多動手,需求基本都能搞定!