EasyUI datagrid 與 input type=color 顏色選擇器

          EasyUI datagrid 與 input type=color 顏色選擇器

一、場景

       在企業管理系統中easyUI用的比較多，尤其是datagrid。但是datagrid自帶的editor不支持h5新增的input type=color顏色選擇器。這裏介紹一個簡單的實現方法，datagrid與input type=color結合使用。

 

二、實現

      

workShift.datagrid({
        height: 300,
        nowrap: true,
        striped: true,
        collapsible: true,
        fitColumns: true,
        method: 'post',
        url:"",
        queryParams:{
            scheduleWorkCode:function(){return $("#scheduleWorkCode").val();},
            id:0
        },
        singleSelect: true,
        remoteSort: true,
        loadMsg: '數據加載中......',
        columns: [
            [{field: 'color', title: '色值', width: 80,
                    formatter:function(value, rowData, rowIndex){
                        return '<input  type="color" id="'+rowIndex.toString()+'" name="color" onchange="setColor(this.id, this.value)" value="'+value+'">';
                    }

                },
              //其他列....
        ]]});
//變換顏色
function setColor(index, color){
    
    var oldData = $('#dataTableId').datagrid("getRows")[parseInt(index)];
    oldData.color = color
    $('#dataTableId').datagrid("updateRow", {
        index:index,
        row:oldData,
    })
}

        使用input的onchang方法來更新datagrid的值。