3

我在我的 PHP 站点中使用 jQuery jTable来显示表格并向表格添加记录/修改记录。

我很少有具有时间值的字段。不幸的是，jTable 只支持日期选择器，而不支持时间选择器。谁能建议如何将 jQuery timepicker 添加到 jTable 中？

我尝试在主 JTable.js 文件中添加几个 JQuery Time Picker。但我认为我添加错误。由于我是 jquery 新手，我不知道如何添加 JQuery Time Picker Plugin

   <div id="ShiftTableContainer" style="width: 600px;"></div>
    <script type="text/javascript">

        $(document).ready(function () {

            //Prepare jTable
            $('#ShiftTableContainer').jtable({
                title: 'Shift',
                actions: {
                    listAction: '../m/ShiftActions.php?action=list',
                    createAction: '../m/ShiftActions.php?action=create',
                    updateAction: '../m/ShiftActions.php?action=update',
                    deleteAction: '../m/ShiftActions.php?action=delete'
                },
                fields: {
                    id: {
                        title: 'Shift Id',
                        width: '25%'
                    },
                    name: {
                        title: 'Shift Name',
                        width: '40%'
                    },
                    start_time: {
                        title: 'Start Time',
                        width: '75%',
                        input: function (data) {
                                var dt = data.record ? data.record.start_time : NULL;
                                return '<input type="text" style="width:200px" value="' + dt + '" />';
                            }
                        inputClass: 'timepicker'
                    },

                    end_time: {
                        title: 'End Time',
                        width: '75%',

                        //options: { '1': '101', '2': '102' }
                    },
                    description: {
                        title: 'Description',
                        width: '75%'
                    },
                    color: {
                        title: 'Color',
                        width: '75%',
                        //options: { '1': '101', '2': '102' }
                    },
                    break_schedule: {
                        title: 'Break Schedule',
                        width: '75%',
                    }
                }

            });

            $('#ShiftTableContainer').jtable('load');
        });



    </script>
            <script>
            $(function(){
                  $("input.timepicker").datetimepicker();
                });     

    </script>
4

4 回答 4

1

我试过这样，它工作正常。我将 JQuery 和 JQuery UI 更新到最新版本。将它与我正在使用的 timepicker 插件一起导入到我的 php 中。我对我的代码做了一些修改。这是工作代码。

        <script type="text/javascript">

        $(document).ready(function () {

            //Prepare jTable
            $('#ShiftTableContainer').jtable({
                title: 'Shift',
                actions: {
                    listAction: '../m/ShiftActions.php?action=list',
                    createAction: '../m/ShiftActions.php?action=create',
                    updateAction: '../m/ShiftActions.php?action=update',
                    deleteAction: '../m/ShiftActions.php?action=delete'
                },
                fields: {
                    id: {
                        key: true,
                        edit: false,
                        title: 'Shift Id',
                        width: '25%'
                    },
                    name: {
                        title: 'Shift Name',
                        width: '40%'
                    },
                    start_time: {
                        title: 'Start Time',
                        width: '75%'
                    },

                    end_time: {
                        title: 'End Time',
                        width: '75%'
                    },
                    description: {
                        title: 'Description',
                        width: '75%'
                    },
                    color: {
                        title: 'Color',
                        width: '75%',
                        //options: { '1': '101', '2': '102' }
                    },
                    break_schedule: {
                        title: 'Break Schedule',
                        width: '75%',
                    }
                },
                formCreated: function (event, data) 
                {
                    var $input_start_time = data.form.find ('input[name="start_time"]');
                    $input_start_time.addClass("time");
                    $input_start_time.timepicker();

                    var $input_end_time = data.form.find ('input[name="end_time"]');
                    $input_end_time.addClass("time");
                    $input_end_time.timepicker();

                }
            });

            $('#ShiftTableContainer').jtable('load');

        });



    </script>
于 2012-10-12T11:00:17.313 回答
0

使用 Timepicker 插件，我还没有测试过，但是这个插件为 jQueryUI Datepicker 添加了一个 timepicker。

http://trentrichardson.com/examples/timepicker/

于 2012-10-11T06:09:49.997 回答
0

使用 dateTimePicker 的“输入”字段（参见http://www.jtable.org/ApiReference）。将 dateTimepicker 绑定到您用于时间的每个文本输入，如下所示：

给所有时间输入相同的类（例如“timepicker”） - 请参阅上述 api 参考中的 'inputClass' 选项 - 然后像这样绑定 timepicker：

$(function(){
  $("input.timepicker").datetimepicker();
});

记得添加dateTimePicker 脚本，在此之前还要添加 jQuery 和 jQuery UI（用户界面）库。

编辑回应评论：

在 jtable 代码之外设置上述时间选择器代码。对于 jtable，请尝试以下操作：

Time: {
    title: 'Start Time',
    input: function (data) {
               var dt = data.record ? data.record.Time : '';
               return '<input type="text" style="width:200px" value="' + dt + '" />';
           }
    inputClass: 'timepicker',
etc.
于 2012-10-11T07:14:15.080 回答
0

我最喜欢的时间选择器是这个 jQuery UI 时间选择器：

http://fgelinas.com/code/timepicker/

于 2012-10-11T10:24:52.367 回答