jqGrid、Bootstrap 时间选择器

最新推荐文章于 2022-12-06 23:14:06 发布

风铃峰顶

最新推荐文章于 2022-12-06 23:14:06 发布

阅读量688

点赞数

分类专栏： JQgrid

本文链接：https://blog.csdn.net/haoranhaoshi/article/details/105466349

版权

JQgrid 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近做了一个考勤系统，用到了jqgrid的时间选择器，关于jqgrid的功能、皮肤等使用可以浏览博主的jqgrid的分类专栏。

官方推荐的和bootstrap的各有优势。

一、先聊官方推荐的：

jqgrid（https://blog.mn886.net/jqGrid/）对jQueryUI的时间选择器支持强度高，jQueryUI皮肤（http://jqueryui.com/themeroller/）也对时间选择器支持。使用步骤：

（1）JS：jqgrid原有的JS基础上加三个：

<script type="text/javascript" src="jqgrid/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.ui.datepicker.js"></script>

（2）colModel对应属性项加上参数：

editable: true,
editoptions: {dataInit: function (e){dealDatePicker(e);}},

var dealDatePicker = function(e){
    $(e).datepicker({
        dateFormat : 'yy-mm-dd',
    });
    $(this).click(function(e){//选中时间后隐藏
        $(e).parent().datepicker('hide');
    });
};

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工</title>
    <link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css"/>
    <link rel="stylesheet" href="jqgrid/css/css/dark-hive/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" href="jqGrid/javascript/datepicker/jquery.ui.datepicker.css" />
    <link rel="stylesheet" href="css/self-jqgrid-font.css"/>
    <link rel="stylesheet" href="css/staff.css"/>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
<script src="js/util.js"></script>
<script src="js/mui.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/staff.js"></script>
</body>
</html>

$(function () {
    pageInit();
});

function pageInit() {
    var tempId;
    var jqGridSetter = {
        datatype: 'json',
        url: serverAddress + "staff/select",
        colNames: ['ID', '姓名', '部门', '职务', '入职时间'],
        colModel: [
            {
                name: 'id',
                index: 'id',
                width: 100,
                align: 'center',
                sortable: false,
                hidden: true,
                key: true
            },
            {
                name: 'name',
                index: 'name',
                width: 100,
                align: 'center',
                sortable: false,
                editable: true,
                editoptions: {size: 10},
                edittype: "text",
                search: true
            },
            {
                name: 'apartment_id',
                index: 'apartment_id',
                width: 100,
                align: 'center',
                sortable: false,
                editable: true,
                editoptions: {size: 10, value: getapartmentEditOptions()},
                edittype: 'select',
                search: true
            },
            {
                name: 'post',
                index: 'post',
                width: 100,
                align: 'center',
                sortable: false,
                editable: true,
                editoptions: {size: 10},
                edittype: "text",
                search: true
            },
            {
                name: 'hiredate',
                index: 'hiredate',
                width: 100,
                align: 'center',
                editable: true,
                editoptions: {size: 10, dataInit: function (e){dealDatePicker(e);}},
                edittype: "text",
                sortable: true,
                sorttype: 'date',
                search: true
            },
        ],
        height: 400,
        autowidth: true,
        shrinkToFit: true,
        rowNum: 15,
        rowList: [10, 15, 20],
        pager: '#pager',
        mtype: 'post',
        viewrecords: true,
        caption: '员工'
    };
    $('#list').jqGrid(jqGridSetter);
    $('#list').jqGrid('navGrid', '#pager', {edit: true, add: true, del: true, search: true});
    $('#add_list span').click(function () {
        $('#list').setGridParam({datatype: 'json', editurl: serverAddress + "staff/insert"});
    });
    $('#edit_list span').click(function () {
        $('#list').setGridParam({datatype: 'json', editurl: serverAddress + "staff/update"});
    });
    $('#del_list span').click(function () {
        $('#list').setGridParam({datatype: 'json', editurl: serverAddress + "staff/delete"});
    });
    $('#search_list span').click(function () {
        mui.getJSON(serverAddress + 'staff/select', {}, function (data) {
            $('#list').setGridParam({datatype: 'local', data: data});
        });
    });
}

var getapartmentEditOptions = function () {
    var options = '';
    $.ajax({
        async: false,
        type: 'get',
        url: serverAddress + 'apartment/select',
        success: function (data) {
            for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
                options += data[dataIndex].id + ':' + data[dataIndex].name;
                if (dataIndex != data.length - 1) {
                    options += ';'
                }
            }

            return options;
        }
    });
    return options;
};

二、如果想选月份，或者小时分钟，datepicker不够，jQuery的datetimepicker不推荐，推荐bootstrap改造的datetimepicker。

关于JS和CSS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>出勤时间</title>
    <link rel="stylesheet" href="css/bootstrap.min.2.2.2.css"/>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css"/>
    <link rel="stylesheet" href="jqgrid/css/css/dark-hive/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" href="css/self-jqgrid-font.css"/>
    <link rel="stylesheet" href="css/attence-time.css"/>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
<script src="js/util.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.7.1.js"></script>-->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
// 从网上读取太慢，推荐下载到本地
<!--<script type="text/javascript" src="jqgrid/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.ui.datepicker.js"></script>-->
<script src="js/bootstrap.min.3.3.0.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/attence-time.js"></script>
</body>
</html>

editable: true,
editoptions: {dataInit: function (e){dealTimePicker(e);}},

editable: true,
editoptions: {dataInit: function (e){dealMonthPicker(e);}},

$.fn.datetimepicker.dates['zh-CN'] = {
    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
    daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    today: "今天",
    suffix: [],
    meridiem: ["上午", "下午"]
};

var dealMonthPicker = function(e){
    // 有效，不推荐
    /*$(e).datepicker({
        dateFormat : 'yy-mm',
    });
    $(this).click(function(e){//选中时间后隐藏
        $(e).parent().datepicker('hide');
    });*/
    $(e).datetimepicker({
        format:'yyyy-mm',
        startView: "year", //初始化视图是‘年’
        minView: "year",//最精确视图为'月'
        maxView: "decade",//最高视图为'十年'
        language:'zh-CN'
    });
};

var dealTimePicker = function(e){
    // 无效
    /*$(e).datepicker({
        timeFormat: 'hh:mm',
    });
    $(this).click(function(e){//选中时间后隐藏
        $(e).parent().datepicker('hide');
    });*/
    $(e).datetimepicker({
        format:'hh:ii',
        startView:'day',
        maxView:'day',
        minView:'hour',
        minuteStep:1,
        autoclose:true,
        pickerPosition: "bottom-left",
        language:'zh-CN',
    });
};

https://blog.csdn.net/json_ligege/article/details/54019790

https://blog.csdn.net/hexu_blog/article/details/99643114?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

风铃峰顶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jqGrid、Bootstrap 时间选择器

最近做了一个考勤系统，用到了jqgrid的时间选择器，关于jqgrid的功能、皮肤等使用可以浏览博主的jqgrid的分类专栏。官方推荐的和bootstrap的各有优势。一、先聊官方推荐的：jqgrid（https://blog.mn886.net/jqGrid/）对jQueryUI的时间选择器支持强度高，jQueryUI皮肤（http://jqueryui.com/themer...
复制链接

扫一扫