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的值。