jquery - 在 Jtable Jquery 中实现 JColor Picker

Question

我将如何将 Jquery-color-picker 实施到我的 Jtable 中以获取字段 colourCode。colourCode 是由 Json 字符串提供的十六进制代码。我对Jtable（输入）做了一些研究。但它把我带到了死胡同。

<script type="text/javascript">
        $(document).ready(function () {
            $('#EventTypeTableContainer').jtable({
                title: 'Table of EventType',
                columnResizable: false,
                columnSelectable: false,
                actions: {
                    listAction: 'Admin/GetEventTypeList',
                    createAction: 'Admin/CreateEventType',
                    updateAction: 'Admin/UpdateEventType',
                    deleteAction: 'Admin/DeleteEventType'
                },
                fields: {
                    EventTypeId: {
                        key: true,
                        list: false
                    },
                    EventTypeName: {
                        title: 'Event Type',
                        width: '40%'
                    },
                    colourCode: {
                        title: 'Event Color',
                        width: '40%',
                        input: $(function () { $('input').ColorPicker(options);}),
                    },
                    isSystemEventType: {
                        title: 'System Constraint',
                        width: '20%',
                        list: false,
                        create: false,
                        edit: false
                    }
                }
            });
            $('#EventTypeTableContainer').jtable('load');
        });
    </script>

Answer 1

您可以使用'input'属性和'formCreated'事件的组合来实现此目的。

在输入函数中，将“id”添加到普通文本输入中。

input: function (data) {
    if (data.record) {
        return '<input id="color" type="text" value="data.record.color">';
    } else {
        return '<input id="color" type="text">';
    }
}

接下来在“formCreated”事件中初始化颜色选择器。

formCreated: function (event, data) {
    $('#color').ColorPicker(options);
}