<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<link rel="stylesheet" href="${contextPath}/static/assets/css/jquery-ui.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/datepicker.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/ui.jqgrid.css" />

<div class="row">
    <div class="col-xs-12">
        <table id="grid-table">

        </table>

        <div id="grid-pager"></div>

        <script type="text/javascript">
            var $path_base = "${contextPath}/static";
        </script>

    </div>
</div>
<script type="text/javascript">

    var myGrid = null;
    var scripts = [ null,  "${contextPath}/static/assets/js/date-time/bootstrap-datepicker.js",
        "${contextPath}/static/assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js",
        "${contextPath}/static/assets/js/jqGrid/jquery.jqGrid.js",
        "${contextPath}/static/assets/js/jqGrid/i18n/grid.locale-cn.js", null ]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function() {
        jQuery(function ($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";
            myGrid=	jQuery(grid_selector).jqGrid({
                subGrid : false,
                url : "${contextPath}/lszp/Job/lszpJobDialogue?topic=${topic}",
                datatype : "json",
                mtype:'POST',
                height:'100%',
                width:'auto',
                colNames : [ '创建时间', '名字', '发送内容', '身份', '消息状态'],
                colModel : [  {
                    name : 'createDate',
                    index : 'createDate',
                    width : 300,
                    sortable : true,
                    editable : false,
                }, {
                    name : 'name',
                    index : 'name',
                    width : 300,
                    editable : false,

                }, {
                    name : 'message',
                    index : 'message',
                    width : 300,
                    editable : false,
                    search : false
                }, {
                    name : 'identity',
                    index : 'identity',
                    width : 200,
                    editable : true,
                }, {
                    name : 'isRead',
                    index : 'isRead',
                    width : 200,
                    editable : false,
                    search : false
                }
                ],
                sortname : "createDate",
                sortorder : "desc",
                viewrecords : true,
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                pager : pager_selector,
                altRows : true,
                multiselect: true,
                loadComplete : function() {
                    var table = this;
                    setTimeout(function(){
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                }
            });

            function updatePagerIcons(table) {
                var replacement = {
                    'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
                    'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
                    'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
                    'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
                };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                    if ($class in replacement)
                        icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({
                    container : 'body'
                });
                $(table).find('.ui-pg-div').tooltip({
                    container : 'body'
                });
            };

        });
    });

</script>