潘钊 / bsth_control · Commits

Commit 140f34b34949f07eb7d582c7c65bf3e6250a7b90

Authored by zq
1 parent 6e21e4a2
build: skipped

运管处

Inline Side-by-side
Showing 9 changed files with 1746 additions and 0 deletions
src/main/resources/static/assets/plugins/jquery.autocompleter.js 0 → 100644
  View file @140f34b
  1 +/*
  2 + * Autocompleter v0.1.2 - 2014-05-20
  3 + * Simple, easy, customisable and with cache support.
  4 + * http://github.com/ArtemFitiskin/jquery-autocompleter
  5 + *
  6 + * Copyright 2014 Artem Fitiskin; MIT Licensed
  7 + */
  8 +
  9 +;(function ($, window) {
  10 + "use strict";
  11 +
  12 + var guid = 0,
  13 + ignoredKeyCode = [9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145],
  14 + allowOptions = ['source', 'empty', 'limit', 'cache', 'focusOpen', 'selectFirst', 'changeWhenSelect', 'highlightMatches', 'ignoredKeyCode', 'customLabel', 'customValue', 'template', 'combine', 'callback'],
  15 + userAgent = (window.navigator.userAgent||window.navigator.vendor||window.opera),
  16 + isFirefox = /Firefox/i.test(userAgent),
  17 + isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(userAgent),
  18 + isFirefoxMobile = (isFirefox && isMobile),
  19 + $body = null,
  20 + localStorageKey = 'autocompleterCache',
  21 + supportLocalStorage = (function () {
  22 + var supported = typeof window.localStorage !== 'undefined';
  23 + if (supported) {
  24 + try {
  25 + localStorage.setItem("autocompleter", "autocompleter");
  26 + localStorage.removeItem("autocompleter");
  27 + } catch (e) {
  28 + supported = false;
  29 + }
  30 + }
  31 + return supported;
  32 + })();
  33 +
  34 + /**
  35 + * @options
  36 + * @param source [(string|object)] <null> "URL to the server or a local object"
  37 + * @param empty [boolean] <true> "Launch if value is empty"
  38 + * @param limit [int] <10> "Number of results to be displayed"
  39 + * @param customClass [array] <[]> "Array with custom classes for autocompleter element"
  40 + * @param cache [boolean] <true> "Save xhr data to localStorage to avoid the repetition of requests"
  41 + * @param focusOpen [boolean] <true> "Launch autocompleter when input gets focus"
  42 + * @param hint [boolean] <false> "Add hint to input with first matched label, correct styles should be installed"
  43 + * @param selectFirst [boolean] <false> "If set to true, first element in autocomplete list will be selected automatically, ignore if changeWhenSelect is on"
  44 + * @param changeWhenSelect [boolean] <true> "Allows to change input value using arrow keys navigation in autocomplete list"
  45 + * @param highlightMatches [boolean] <false> "This option defines <strong> tag wrap for matches in autocomplete results"
  46 + * @param ignoredKeyCode [array] <[]> "Array with ignorable keycodes"
  47 + * @param customLabel [boolean] <false> "The name of object's property which will be used as a label"
  48 + * @param customValue [boolean] <false> "The name of object's property which will be used as a value"
  49 + * @param template [(string|boolean)] <false> "Custom template for list items"
  50 + * @param combine [function] <$.noop> "Returns an object which extends ajax data. Useful if you want to pass some additional server options"
  51 + * @param callback [function] <$.noop> "Select value callback function. Arguments: value, index"
  52 + */
  53 + var options = {
  54 + source: null,
  55 + empty: true,
  56 + limit: 10,
  57 + customClass: [],
  58 + cache: true,
  59 + focusOpen: true,
  60 + hint: false,
  61 + selectFirst: false,
  62 + changeWhenSelect: true,
  63 + highlightMatches: false,
  64 + ignoredKeyCode: [],
  65 + customLabel: false,
  66 + customValue: false,
  67 + template: false,
  68 + combine: $.noop,
  69 + callback: $.noop
  70 + };
  71 +
  72 + var publics = {
  73 +
  74 + /**
  75 + * @method
  76 + * @name defaults
  77 + * @description Sets default plugin options
  78 + * @param opts [object] <{}> "Options object"
  79 + * @example $.autocompleter("defaults", opts);
  80 + */
  81 + defaults: function (opts) {
  82 + options = $.extend(options, opts || {});
  83 + return $(this);
  84 + },
  85 +
  86 + /**
  87 + * @method
  88 + * @name option
  89 + * @description Open autocompleter list
  90 + */
  91 + option: function (properties) {
  92 + return $(this).each(function(i, input) {
  93 + var data = $(input).next(".autocompleter").data("autocompleter");
  94 +
  95 + for (var property in properties) {
  96 + if ($.inArray(property, allowOptions) !== -1) {
  97 + data[property] = properties[property];
  98 + }
  99 + }
  100 + });
  101 + },
  102 +
  103 + /**
  104 + * @method
  105 + * @name open
  106 + * @description Open autocompleter list
  107 + */
  108 + open: function () {
  109 + return $(this).each(function(i, input) {
  110 + var data = $(input).next(".autocompleter").data("autocompleter");
  111 +
  112 + if (data) {
  113 + _open(null, data);
  114 + }
  115 + });
  116 + },
  117 +
  118 + /**
  119 + * @method
  120 + * @name close
  121 + * @description Close autocompleter list
  122 + */
  123 + close: function () {
  124 + return $(this).each(function(i, input) {
  125 + var data = $(input).next(".autocompleter").data("autocompleter");
  126 +
  127 + if (data) {
  128 + _close(null, data);
  129 + }
  130 + });
  131 + },
  132 +
  133 + /**
  134 + * @method
  135 + * @name clearCache
  136 + * @description Remove localStorage cache
  137 + */
  138 + clearCache: function () {
  139 + _deleteCache();
  140 + },
  141 +
  142 + /**
  143 + * @method
  144 + * @name destroy
  145 + * @description Removes instance of plugin
  146 + * @example $(".target").autocompleter("destroy");
  147 + */
  148 + destroy: function () {
  149 + return $(this).each(function (i, input) {
  150 + var data = $(input).next(".autocompleter").data("autocompleter");
  151 +
  152 + if (data) {
  153 + // Abort xhr
  154 + if (data.jqxhr) {
  155 + data.jqxhr.abort();
  156 + }
  157 +
  158 + // If has selected item & open - confirm it
  159 + if (data.$autocompleter.hasClass("open")) {
  160 + data.$autocompleter.find(".autocompleter-selected")
  161 + .trigger("click.autocompleter");
  162 + }
  163 +
  164 + // Restore original autocomplete attr
  165 + if(!data.originalAutocomplete) {
  166 + data.$node.removeAttr("autocomplete");
  167 + } else {
  168 + data.$node.attr("autocomplete", data.originalAutocomplete);
  169 + }
  170 +
  171 + // Remove autocompleter & unbind events
  172 + data.$node.off(".autocompleter")
  173 + .removeClass("autocompleter-node");
  174 + data.$autocompleter.off(".autocompleter")
  175 + .remove();
  176 + }
  177 + });
  178 + }
  179 + };
  180 +
  181 + /**
  182 + * @method private
  183 + * @name _init
  184 + * @description Initializes plugin
  185 + * @param opts [object] "Initialization options"
  186 + */
  187 + function _init(opts) {
  188 + // Local options
  189 + opts = $.extend({}, options, opts || {});
  190 +
  191 + // Check for Body
  192 + if ($body === null) {
  193 + $body = $("body");
  194 + }
  195 +
  196 + // Apply to each element
  197 + var $items = $(this);
  198 + for (var i = 0, count = $items.length; i < count; i++) {
  199 + _build($items.eq(i), opts);
  200 + }
  201 +
  202 + return $items;
  203 + }
  204 +
  205 + /**
  206 + * @method private
  207 + * @name _build
  208 + * @description Builds each instance
  209 + * @param $node [jQuery object] "Target jQuery object"
  210 + * @param opts [object] <{}> "Options object"
  211 + */
  212 + function _build($node, opts) {
  213 + if (!$node.hasClass("autocompleter-node")) {
  214 + // Extend options
  215 + opts = $.extend({}, opts, $node.data("autocompleter-options"));
  216 +
  217 + var html = '<div class="autocompleter '+opts.customClass.join(' ')+'" id="autocompleter-'+(guid+1)+'">';
  218 + if (opts.hint) {
  219 + html += '<div class="autocompleter-hint"></div>';
  220 + }
  221 + html += '<ul class="autocompleter-list"></ul>';
  222 + html += '</div>';
  223 +
  224 + $node.addClass("autocompleter-node")
  225 + .after(html);
  226 +
  227 + var $autocompleter = $node.next(".autocompleter").eq(0);
  228 +
  229 + // Set autocomplete to off for warn overlay
  230 + var originalAutocomplete = $node.attr("autocomplete");
  231 + $node.attr("autocomplete", "off");
  232 +
  233 + // Store plugin data
  234 + var data = $.extend({
  235 + $node: $node,
  236 + $autocompleter: $autocompleter,
  237 + $selected: null,
  238 + $list: null,
  239 + index: -1,
  240 + hintText: false,
  241 + source: false,
  242 + jqxhr: false,
  243 + response: null,
  244 + focused: false,
  245 + query: '',
  246 + originalAutocomplete: originalAutocomplete,
  247 + guid: guid++
  248 + }, opts);
  249 +
  250 + // Bind autocompleter events
  251 + data.$autocompleter.on("mousedown.autocompleter", ".autocompleter-item", data, _select)
  252 + .data("autocompleter", data);
  253 +
  254 + // Bind node events
  255 + data.$node.on("keyup.autocompleter", data, _onKeyup)
  256 + .on("keydown.autocompleter", data, _onKeydownHelper)
  257 + .on("focus.autocompleter", data, _onFocus)
  258 + .on("blur.autocompleter", data, _onBlur)
  259 + .on("mousedown.autocompleter", data, _onMousedown);
  260 + }
  261 + }
  262 +
  263 + /**
  264 + * @method private
  265 + * @name _search
  266 + * @description Local search function, return best collation
  267 + * @param query [string] "Query string"
  268 + * @param source [object] "Source data"
  269 + * @param limit [integer] "Results length"
  270 + */
  271 + function _search(query, source, limit) {
  272 + var response = [];
  273 + query = query.toUpperCase();
  274 +
  275 + if (source.length) {
  276 + for (var i = 0; i < 2; i++) {
  277 + for (var item in source) {
  278 + if (response.length < limit) {
  279 + switch (i) {
  280 + case 0:
  281 + if (source[item].label.toUpperCase().search(query) === 0) {
  282 + response.push(source[item]);
  283 + delete source[item];
  284 + }
  285 + break;
  286 +
  287 + case 1:
  288 + if (source[item].label.toUpperCase().search(query) !== -1) {
  289 + response.push(source[item]);
  290 + delete source[item];
  291 + }
  292 + break;
  293 + }
  294 + }
  295 + }
  296 + }
  297 + }
  298 +
  299 + return response;
  300 + }
  301 +
  302 + /**
  303 + * @method private
  304 + * @name _launch
  305 + * @description Use source locally or create xhr
  306 + * @param data [object] "Instance data"
  307 + */
  308 + function _launch(data) {
  309 + data.query = $.trim(data.$node.val());
  310 +
  311 + if (!data.empty && data.query.length === 0) {
  312 + _clear(data);
  313 + return;
  314 + } else {
  315 + if (typeof data.source === 'object') {
  316 + _clear(data);
  317 +
  318 + // Local search
  319 + var search = _search(data.query, _clone(data.source), data.limit);
  320 + if (search.length) {
  321 + _response(search, data);
  322 + }
  323 + } else {
  324 + if (data.jqxhr) {
  325 + data.jqxhr.abort();
  326 + }
  327 +
  328 + var ajaxData = $.extend({
  329 + limit: data.limit,
  330 + query: data.query
  331 + }, data.combine());
  332 +
  333 + data.jqxhr = $.ajax({
  334 + url: data.source,
  335 + dataType: "json",
  336 + data: ajaxData,
  337 + beforeSend: function (xhr) {
  338 + data.$autocompleter.addClass('autocompleter-ajax');
  339 + _clear(data);
  340 + if (data.cache) {
  341 + var stored = _getCache(this.url);
  342 + if (stored) {
  343 + xhr.abort();
  344 + _response(stored, data);
  345 + }
  346 + }
  347 + }
  348 + })
  349 + .done(function (response) {
  350 + if (data.cache) {
  351 + _setCache(this.url, response);
  352 + }
  353 + _response(response, data);
  354 + })
  355 + .always(function () {
  356 + data.$autocompleter.removeClass('autocompleter-ajax');
  357 + });
  358 + }
  359 + }
  360 + }
  361 +
  362 + /**
  363 + * @method private
  364 + * @name _clear
  365 + * @param data [object] "Instance data"
  366 + */
  367 + function _clear(data) {
  368 + // Clear data
  369 + data.response = null;
  370 + data.$list = null;
  371 + data.$selected = null;
  372 + data.index = 0;
  373 + data.$autocompleter.find(".autocompleter-list").empty();
  374 + data.$autocompleter.find('.autocompleter-hint').removeClass('autocompleter-hint-show').empty();
  375 + data.hintText = false;
  376 +
  377 + _close(null, data);
  378 + }
  379 +
  380 + /**
  381 + * @method private
  382 + * @name _response
  383 + * @description Main source response function
  384 + * @param response [object] "Source data"
  385 + * @param data [object] "Instance data"
  386 + */
  387 + function _response(response, data) {
  388 + _buildList(response, data);
  389 +
  390 + if (data.$autocompleter.hasClass('autocompleter-focus')) {
  391 + _open(null, data);
  392 + }
  393 + }
  394 +
  395 + /**
  396 + * @method private
  397 + * @name _buildList
  398 + * @description Generate autocompleter-list and update instance data by source
  399 + * @param list [object] "Source data"
  400 + * @param data [object] "Instance data"
  401 + */
  402 + function _buildList(list, data) {
  403 + var menu = '';
  404 +
  405 + for (var item = 0, count = list.length; item < count; item++) {
  406 + var classes = ["autocompleter-item"];
  407 +
  408 + if (data.selectFirst && item === 0 && !data.changeWhenSelect) {
  409 + classes.push("autocompleter-item-selected");
  410 + }
  411 +
  412 + var highlightReg = new RegExp(data.query, "gi");
  413 + var label = (data.customLabel && list[item][data.customLabel]) ? list[item][data.customLabel] : list[item].label;
  414 +
  415 + var clear = label;
  416 +
  417 + label = data.highlightMatches ? label.replace(highlightReg, "<strong>$&</strong>") : label;
  418 +
  419 + var value = (data.customValue && list[item][data.customValue]) ? list[item][data.customValue] : list[item].value;
  420 +
  421 + // Apply custom template
  422 + if (data.template) {
  423 + var template = data.template.replace(/({{ label }})/gi, label);
  424 +
  425 + for (var property in list[item]) {
  426 + if (list[item].hasOwnProperty(property)) {
  427 + var regex = new RegExp('{{ '+ property +' }}', 'gi');
  428 + template = template.replace(regex, list[item][property]);
  429 + }
  430 + }
  431 +
  432 + label = template;
  433 + }
  434 +
  435 + if (value) {
  436 + menu += '<li data-value="'+value+'" data-label="'+clear+'" class="'+classes.join(' ')+'">'+label+'</li>';
  437 + } else {
  438 + menu += '<li data-label="'+clear+'" class="'+classes.join(' ')+'">'+label+'</li>';
  439 + }
  440 + }
  441 +
  442 + // Set hint
  443 + if (list.length && data.hint) {
  444 + var hint = ( list[0].label.substr(0, data.query.length).toUpperCase() === data.query.toUpperCase() ) ? list[0].label : false;
  445 + if (hint && (data.query !== list[0].label)) {
  446 + var hintReg = new RegExp(data.query, "i");
  447 + var hintText = hint.replace(hintReg, "<span>"+data.query+"</span>");
  448 + data.$autocompleter.find('.autocompleter-hint').addClass('autocompleter-hint-show').html(hintText);
  449 + data.hintText = hintText;
  450 + }
  451 + }
  452 +
  453 + // Update data
  454 + data.response = list;
  455 + data.$autocompleter.find(".autocompleter-list").html(menu);
  456 + data.$selected = (data.$autocompleter.find(".autocompleter-item-selected").length) ? data.$autocompleter.find(".autocompleter-item-selected") : null;
  457 + data.$list = (list.length) ? data.$autocompleter.find(".autocompleter-item") : null;
  458 + data.index = data.$selected ? data.$list.index(data.$selected) : -1;
  459 + data.$autocompleter.find(".autocompleter-item").each(function (i, j) {
  460 + $(j).data(data.response[i]);
  461 + });
  462 + }
  463 +
  464 + /**
  465 + * @method private
  466 + * @name _onKeyup
  467 + * @description Keyup events in node, up/down autocompleter-list navigation, typing and enter button callbacks
  468 + * @param e [object] "Event data"
  469 + */
  470 + function _onKeyup(e) {
  471 + var data = e.data;
  472 + var code = e.keyCode ? e.keyCode : e.which;
  473 +
  474 + if ( (code === 40 || code === 38) && data.$autocompleter.hasClass('autocompleter-show') ) {
  475 + // Arrows up & down
  476 + var len = data.$list.length,
  477 + next,
  478 + prev;
  479 +
  480 + if (len) {
  481 + // Determine new index
  482 + if (len > 1) {
  483 + if (data.index === len - 1) {
  484 + next = data.changeWhenSelect ? -1 : 0;
  485 + prev = data.index - 1;
  486 + } else if (data.index === 0) {
  487 + next = data.index + 1;
  488 + prev = data.changeWhenSelect ? -1 : len - 1;
  489 + } else if (data.index === -1) {
  490 + next = 0;
  491 + prev = len - 1;
  492 + } else {
  493 + next = data.index + 1;
  494 + prev = data.index - 1;
  495 + }
  496 + } else if (data.index === -1) {
  497 + next = 0;
  498 + prev = 0;
  499 + } else {
  500 + prev = -1;
  501 + next = -1;
  502 + }
  503 + data.index = (code === 40) ? next : prev;
  504 +
  505 + // Update HTML
  506 + data.$list.removeClass("autocompleter-item-selected");
  507 + if (data.index !== -1) {
  508 + data.$list.eq(data.index).addClass("autocompleter-item-selected");
  509 + }
  510 + data.$selected = data.$autocompleter.find(".autocompleter-item-selected").length ? data.$autocompleter.find(".autocompleter-item-selected") : null;
  511 + if (data.changeWhenSelect) {
  512 + _setValue(data);
  513 + }
  514 + }
  515 + } else if ($.inArray(code, ignoredKeyCode) === -1 && $.inArray(code, data.ignoredKeyCode) === -1) {
  516 + // Typing
  517 + _launch(data);
  518 + }
  519 + }
  520 +
  521 + /**
  522 + * @method private
  523 + * @name _onKeydownHelper
  524 + * @description Keydown events in node, up/down for prevent cursor moving and right arrow for hint
  525 + * @param e [object] "Event data"
  526 + */
  527 + function _onKeydownHelper(e) {
  528 + var code = e.keyCode ? e.keyCode : e.which;
  529 + var data = e.data;
  530 +
  531 + if (code === 40 || code === 38 ) {
  532 + e.preventDefault();
  533 + e.stopPropagation();
  534 + } else if (code === 39) {
  535 + // Right arrow
  536 + if (data.hint && data.hintText && data.$autocompleter.find('.autocompleter-hint').hasClass('autocompleter-hint-show')) {
  537 + e.preventDefault();
  538 + e.stopPropagation();
  539 +
  540 + var hintOrigin = data.$autocompleter.find(".autocompleter-item").length ? data.$autocompleter.find(".autocompleter-item").eq(0).attr('data-label') : false;
  541 + if (hintOrigin) {
  542 + data.query = hintOrigin;
  543 + _setHint(data);
  544 + }
  545 + }
  546 + } else if (code === 13) {
  547 + // Enter
  548 + if (data.$autocompleter.hasClass('autocompleter-show') && data.$selected) {
  549 + _select(e);
  550 + }
  551 + }
  552 + }
  553 +
  554 + /**
  555 + * @method private
  556 + * @name _onFocus
  557 + * @description Handles instance focus
  558 + * @param e [object] "Event data"
  559 + * @param internal [boolean] "Called by plugin"
  560 + */
  561 + function _onFocus(e, internal) {
  562 + if (!internal) {
  563 + var data = e.data;
  564 +
  565 + data.$autocompleter.addClass("autocompleter-focus");
  566 +
  567 + if (!data.$node.prop("disabled") && !data.$autocompleter.hasClass('autocompleter-show')) {
  568 + if (data.focusOpen) {
  569 + _launch(data);
  570 + data.focused = true;
  571 + setTimeout(function () {
  572 + data.focused = false;
  573 + }, 500);
  574 + }
  575 + }
  576 + }
  577 + }
  578 +
  579 + /**
  580 + * @method private
  581 + * @name _onBlur
  582 + * @description Handles instance blur
  583 + * @param e [object] "Event data"
  584 + * @param internal [boolean] "Called by plugin"
  585 + */
  586 + function _onBlur(e, internal) {
  587 + e.preventDefault();
  588 + e.stopPropagation();
  589 +
  590 + var data = e.data;
  591 +
  592 + if (!internal) {
  593 + data.$autocompleter.removeClass("autocompleter-focus");
  594 + _close(e);
  595 + }
  596 + }
  597 +
  598 + /**
  599 + * @method private
  600 + * @name _onMousedown
  601 + * @description Handles mousedown to node
  602 + * @param e [object] "Event data"
  603 + */
  604 + function _onMousedown(e) {
  605 + // Disable middle & right mouse click
  606 + if (e.type === "mousedown" && $.inArray(e.which, [2, 3]) !== -1) { return; }
  607 +
  608 + var data = e.data;
  609 + if (data.$list && !data.focused) {
  610 + if (!data.$node.is(":disabled")) {
  611 + if (isMobile && !isFirefoxMobile) {
  612 + var el = data.$select[0];
  613 + if (window.document.createEvent) { // All
  614 + var evt = window.document.createEvent("MouseEvents");
  615 + evt.initMouseEvent("mousedown", false, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  616 + el.dispatchEvent(evt);
  617 + } else if (el.fireEvent) { // IE
  618 + el.fireEvent("onmousedown");
  619 + }
  620 + } else {
  621 + // Delegate intent
  622 + if (data.$autocompleter.hasClass("autocompleter-closed")) {
  623 + _open(e);
  624 + } else if (data.$autocompleter.hasClass("autocompleter-show")) {
  625 + _close(e);
  626 + }
  627 + }
  628 + }
  629 + }
  630 + }
  631 +
  632 + /**
  633 + * @method private
  634 + * @name _open
  635 + * @description Opens option set
  636 + * @param e [object] "Event data"
  637 + * @param instanceData [object] "Instance data"
  638 + */
  639 + function _open(e, instanceData) {
  640 + var data = e ? e.data : instanceData;
  641 +
  642 + if (!data.$node.prop("disabled") && !data.$autocompleter.hasClass("autocompleter-show") && data.$list && data.$list.length ) {
  643 + data.$autocompleter.removeClass("autocompleter-closed").addClass("autocompleter-show");
  644 + $body.on("click.autocompleter-" + data.guid, ":not(.autocompleter-item)", data, _closeHelper);
  645 + }
  646 + }
  647 +
  648 + /**
  649 + * @method private
  650 + * @name _closeHelper
  651 + * @description Determines if event target is outside instance before closing
  652 + * @param e [object] "Event data"
  653 + */
  654 + function _closeHelper(e) {
  655 + if ( $(e.target).hasClass('autocompleter-node') ) {
  656 + return;
  657 + }
  658 +
  659 + if ($(e.currentTarget).parents(".autocompleter").length === 0) {
  660 + _close(e);
  661 + }
  662 + }
  663 +
  664 + /**
  665 + * @method private
  666 + * @name _close
  667 + * @description Closes option set
  668 + * @param e [object] "Event data"
  669 + * @param instanceData [object] "Instance data"
  670 + */
  671 + function _close(e, instanceData) {
  672 + var data = e ? e.data : instanceData;
  673 +
  674 + if (data.$autocompleter.hasClass("autocompleter-show")) {
  675 + data.$autocompleter.removeClass("autocompleter-show").addClass("autocompleter-closed");
  676 + $body.off(".autocompleter-" + data.guid);
  677 + }
  678 + }
  679 +
  680 + /**
  681 + * @method private
  682 + * @name _select
  683 + * @description Select item from .autocompleter-list
  684 + * @param e [object] "Event data"
  685 + */
  686 + function _select(e) {
  687 + // Disable middle & right mouse click
  688 + if (e.type === "mousedown" && $.inArray(e.which, [2, 3]) !== -1) { return; }
  689 +
  690 + var data = e.data;
  691 +
  692 + e.preventDefault();
  693 + e.stopPropagation();
  694 +
  695 + if (e.type === "mousedown" && $(this).length) {
  696 + data.$selected = $(this);
  697 + data.index = data.$list.index(data.$selected);
  698 + }
  699 +
  700 + if (!data.$node.prop("disabled")) {
  701 + _close(e);
  702 + _update(data);
  703 +
  704 + if (e.type === "click") {
  705 + data.$node.trigger("focus", [true]);
  706 + }
  707 + }
  708 + }
  709 +
  710 + /**
  711 + * @method private
  712 + * @name _setHint
  713 + * @description Set autocompleter by hint
  714 + * @param data [object] "Instance data"
  715 + */
  716 + function _setHint(data) {
  717 + _setValue(data);
  718 + _handleChange(data);
  719 + _launch(data);
  720 + }
  721 +
  722 + /**
  723 + * @method private
  724 + * @name _setValue
  725 + * @description Set value for native field
  726 + * @param data [object] "Instance data"
  727 + */
  728 + function _setValue(data) {
  729 + if (data.$selected) {
  730 + if (data.hintText && data.$autocompleter.find('.autocompleter-hint').hasClass('autocompleter-hint-show')) {
  731 + data.$autocompleter.find('.autocompleter-hint').removeClass('autocompleter-hint-show');
  732 + }
  733 + var value = data.$selected.attr('data-value') ? data.$selected.attr('data-value') : data.$selected.attr('data-label');
  734 + data.$node.val(value);
  735 + } else {
  736 + if (data.hintText && !data.$autocompleter.find('.autocompleter-hint').hasClass('autocompleter-hint-show')) {
  737 + data.$autocompleter.find('.autocompleter-hint').addClass('autocompleter-hint-show');
  738 + }
  739 + data.$node.val(data.query);
  740 + }
  741 + }
  742 +
  743 + /**
  744 + * @method private
  745 + * @name _update
  746 + * @param data [object] "Instance data"
  747 + */
  748 + function _update(data) {
  749 + _setValue(data);
  750 + _handleChange(data);
  751 + _clear(data);
  752 + }
  753 +
  754 + /**
  755 + * @method private
  756 + * @name _handleChange
  757 + * @description Trigger node change event and call the callback function
  758 + * @param data [object] "Instance data"
  759 + */
  760 + function _handleChange(data) {
  761 + data.callback.call(data.$autocompleter, data.$node.val(), data.index, data.response[data.index]);
  762 + data.$node.trigger("change");
  763 + }
  764 +
  765 + /**
  766 + * @method private
  767 + * @name _getCache
  768 + * @description Store AJAX response in plugin cache
  769 + * @param url [string] "AJAX get query string"
  770 + * @param data [object] "AJAX response data"
  771 + */
  772 + function _setCache(url, data) {
  773 + if (!supportLocalStorage) { return; }
  774 + if (url && data) {
  775 + cache[url] = {
  776 + value: data
  777 + };
  778 +
  779 + // Proccess to localStorage
  780 + try {
  781 + localStorage.setItem(localStorageKey, JSON.stringify(cache));
  782 + } catch (e) {
  783 + var code = e.code || e.number || e.message;
  784 + if (code === 22) {
  785 + _deleteCache();
  786 + } else {
  787 + throw(e);
  788 + }
  789 + }
  790 + }
  791 + }
  792 +
  793 + /**
  794 + * @method private
  795 + * @name _getCache
  796 + * @description Get cached data by url if exist
  797 + * @param url [string] "AJAX get query string"
  798 + */
  799 + function _getCache(url) {
  800 + if (!url) { return; }
  801 + var response = (cache[url] && cache[url].value) ? cache[url].value : false;
  802 + return response;
  803 + }
  804 +
  805 + /**
  806 + * @method private
  807 + * @name _loadCache
  808 + * @description Load all plugin cache from localStorage
  809 + */
  810 + function _loadCache() {
  811 + if (!supportLocalStorage) { return; }
  812 + var json = localStorage.getItem(localStorageKey) || '{}';
  813 + return JSON.parse(json);
  814 + }
  815 +
  816 + /**
  817 + * @method private
  818 + * @name _deleteCache
  819 + * @description Delete all plugin cache from localStorage
  820 + */
  821 + function _deleteCache() {
  822 + try {
  823 + localStorage.removeItem(localStorageKey);
  824 + cache = _loadCache();
  825 + } catch (e) {
  826 + throw(e);
  827 + }
  828 + }
  829 +
  830 + /**
  831 + * @method private
  832 + * @name _clone
  833 + * @description Clone JavaScript object
  834 + */
  835 + function _clone(obj) {
  836 + if (null === obj || "object" !== typeof obj) {
  837 + return obj;
  838 + }
  839 + var copy = obj.constructor();
  840 + for (var attr in obj) {
  841 + if (obj.hasOwnProperty(attr)) {
  842 + copy[attr] = obj[attr];
  843 + }
  844 + }
  845 + return copy;
  846 + }
  847 +
  848 + // Load cache
  849 + var cache = _loadCache();
  850 +
  851 + $.fn.autocompleter = function (method) {
  852 + if (publics[method]) {
  853 + return publics[method].apply(this, Array.prototype.slice.call(arguments, 1));
  854 + } else if (typeof method === 'object' || !method) {
  855 + return _init.apply(this, arguments);
  856 + }
  857 + return this;
  858 + };
  859 +
  860 + $.autocompleter = function (method) {
  861 + if (method === "defaults") {
  862 + publics.defaults.apply(this, Array.prototype.slice.call(arguments, 1));
  863 + } else if (method === "clearCache") {
  864 + publics.clearCache.apply(this, null);
  865 + }
  866 + };
  867 +})(jQuery, window);
... ...
src/main/resources/static/pages/trafficManage/css/autocompleter.css 0 → 100644
  View file @140f34b
  1 +/**
  2 + * Simplecomplete
  3 + */
  4 +
  5 +.autocompleter {
  6 + width: 20%;
  7 + background: #ffffff;
  8 + position: relative;
  9 + z-index: 100;
  10 +}
  11 +
  12 +.autocompleter,
  13 +.autocompleter-hint {
  14 + position: absolute;
  15 +}
  16 +
  17 +.autocompleter-list {
  18 + box-shadow: inset 0px 0px 6px rgba(0,0,0,0.1);
  19 + list-style: none;
  20 + margin: 0;
  21 + padding: 0;
  22 + text-align: left;
  23 +}
  24 +
  25 +.autocompleter-item-selected {
  26 + background: #ffffff;
  27 +}
  28 +
  29 +.autocompleter-item {
  30 + padding: 6px 12px;
  31 + color: #444444;
  32 + font-size: 14px;
  33 + cursor: pointer;
  34 +}
  35 +
  36 +.autocompleter-item:hover {
  37 + background: #ddd;
  38 +}
  39 +
  40 +.autocompleter-item strong {
  41 + background: #f9de8f;
  42 + text-shadow: 0 1px 0 #ffffff;
  43 +}
  44 +
  45 +.autocompleter-item span {
  46 + color: #bbbbbb;
  47 +}
  48 +
  49 +.autocompleter-hint {
  50 + color: #ccc;
  51 + text-align: left;
  52 + top: -56px;
  53 + font-weight: 400;
  54 + left: 0;
  55 + width: 100%;
  56 + padding: 12px 12px 12px 13px;
  57 + font-size: 24px;
  58 + display: none;
  59 +}
  60 +
  61 +.autocompleter-hint span {
  62 + color: transparent;
  63 +}
  64 +
  65 +
  66 +.autocompleter-closed {
  67 + display: none;
  68 +}
... ...
src/main/resources/static/pages/trafficManage/css/trafficManage.css 0 → 100644
  View file @140f34b
  1 +
  2 +.tab_line{
  3 + background-color: #ffffff;
  4 + height: 800px;
  5 + padding-left: 3px;
  6 + padding-right: 3px;
  7 +}
  8 +.tab_line .breadcrumb{
  9 + color: #3f444a;
  10 + padding-top:10px;
  11 +}
  12 +.tab_line .panel-wrap{
  13 + height: 100%;
  14 + padding-left: 3px;
  15 + padding-right: 3px;
  16 +}
  17 +
  18 +.tab_line .panel-wrap ._panel{
  19 + border: 1px solid #ddd;
  20 + box-shadow: 0 2px 5px 0 rgba(221, 221, 221, 0.32),0 2px 10px 0 rgba(221, 221, 221, 0.32);
  21 + width: 100%;
  22 + height: 100%;
  23 + position: relative;
  24 + /* overflow: auto; */
  25 +}
  26 +.tab_line .panel-wrap ._panel ._head{
  27 + height: 42px;
  28 + line-height: 42px;
  29 + padding-left: 15px;
  30 + font-size: 16px;
  31 + font-family: 微软雅黑;
  32 +}
  33 +.table-striped>tbody>tr:nth-of-type(even) {
  34 + background-color: #eee;
  35 +}
  36 +
  37 +.breadcruma {
  38 + margin:0 auto;
  39 +}
  40 +
  41 +.breadcruma li {
  42 + text-align:center;
  43 + margin:0 auto;
  44 + list-style-type:none;
  45 +}
  46 +.divVerHorCenter{
  47 + line-height: 3;
  48 + position: absolute;
  49 + padding-left: initial;
  50 + top: 50%;
  51 + left: 50%;
  52 + width:50%;
  53 + -webkit-transform: translateX(-50%) translateY(-50%);
  54 +}
0 55 \ No newline at end of file
... ...
src/main/resources/static/pages/trafficManage/js/lineStationUpload.js 0 → 100644
  View file @140f34b
  1 +/**
  2 + *
  3 + * @JSName : common.js(运管功能公共js)
  4 + *
  5 + * @Author : bsth@lq
  6 + *
  7 + * @Description : TODO(运管功能公共js)
  8 + *
  9 + * @Data : 2016年6月29日 上午9:21:17
  10 + *
  11 + * @Version 公交调度系统BS版 0.1
  12 + *
  13 + */
  14 +
  15 +(function(){
  16 + /**
  17 + * 取得编码-公司map
  18 + * gsmap["5"] = 南汇公司
  19 + * gsmap["5_3"] = 芦潮港分公司
  20 + */
  21 + function getBusMap(){
  22 + // 取得公司信息，替换公司编码
  23 + var gsmap = {};
  24 + $get('/business/all', null, function(array){
  25 + $.each(array, function(i, gs){
  26 + var k = gs.upCode + '_' + gs.businessCode;
  27 + if(gs.upCode === '88'){
  28 + k = gs.businessCode;
  29 + }
  30 + gsmap[k] = gs.businessName;
  31 + });
  32 + });
  33 + return gsmap;
  34 + }
  35 + // 填充公司下拉框选择值
  36 + $get('/business/all', {upCode_eq: '88'}, function(array){
  37 +
  38 + // 公司下拉options属性值
  39 + var options = '<option value="">请选择...</option>';
  40 +
  41 + // 遍历array
  42 + $.each(array, function(i,d){
  43 +
  44 + options += '<option value="'+d.businessCode+'">'+d.businessName+'</option>';
  45 +
  46 + });
  47 +
  48 + // 填充公司下拉框options,并添加公司下拉框值改变事件setbrancheCompanySelectOptions
  49 + $('#companySelect').html(options).on('change', setbrancheCompanySelectOptions);
  50 +
  51 + });
  52 +
  53 + // 填充分公司下拉框选择值
  54 + function setbrancheCompanySelectOptions(){
  55 +
  56 + // 获取公司下拉框选择值
  57 + var businessCode = $('#companySelect').val();
  58 +
  59 + // 分公司下拉框options属性值
  60 + var options = '<option value="">请选择...</option>';
  61 +
  62 + // 如果公司选择为空则分公司为空 ; 否则查询出所属公司下的分公司名称和相应分公司代码
  63 + if(businessCode == null || businessCode ==''){
  64 +
  65 + // 填充分公司下拉框options
  66 + $('#brancheCompanySelect').html(options);
  67 +
  68 + } else {
  69 +
  70 + // 查询出所属公司下的分公司名称和相应分公司代码
  71 + $get('/business/all', {upCode_eq: businessCode}, function(array){
  72 +
  73 + // 遍历array
  74 + $.each(array, function(i,d){
  75 +
  76 + options += '<option value="'+d.businessCode+'">'+d.businessName+'</option>';
  77 +
  78 + // 填充分公司下拉框options
  79 + $('#brancheCompanySelect').html(options);
  80 +
  81 + });
  82 + });
  83 +
  84 + // 填充公司下拉框options,并添加公司下拉框值改变事件setbrancheCompanySelectOptions
  85 + $('#brancheCompanySelect').html(options).on('change', setLineAutocompleteOptions);
  86 + }
  87 + }
  88 +
  89 + function setLineAutocompleteOptions(){
  90 + // 搜索参数集合
  91 + var params = {};
  92 + // 搜索字段名称
  93 + var name;
  94 + var items = $("ul.breadcrumb select");
  95 + // 遍历items集合
  96 + for(var j = 0, item; item = items[j++];){
  97 + // 获取字段名称
  98 + name = $(item).attr('name');
  99 + if(name){
  100 + // 赋取相对应的值
  101 + params[name] = $(item).val();
  102 + }
  103 + }
  104 + var lines = new Array();
  105 + var gsmap = getBusMap();
  106 + // 取得所有线路
  107 + $get('/line/all', params, function(allLine) {
  108 + // 遍历数组
  109 + $.each(allLine, function(i, e) {
  110 + var companyCode = e.company;
  111 + e.company = gsmap[e.company];
  112 + e.brancheCompany = gsmap[companyCode+"_"+e.brancheCompany];
  113 + var line = '{"hex":"'+e.company+'","label":"'+e.name+'"}';
  114 + var obj = jQuery.parseJSON(line);
  115 + lines[i]= obj;
  116 + });
  117 +
  118 +
  119 + });
  120 + // 给输入框绑定autocomplete事件
  121 + $("input[name='name_eq']").autocompleter({
  122 + highlightMatches: true,
  123 + source: lines,
  124 + template: '{{ label }} <span>({{ hex }})</span>',
  125 + hint: true,
  126 + empty: false,
  127 + limit: 5,
  128 + });
  129 + }
  130 +
  131 +
  132 + // 设置autocompleter的宽度和输入框一样
  133 + $(".autocompleter").css("width",$("input[name='name_eq']").css("width"))
  134 + // 绑定查询事件
  135 + $("#search").click(searchM);
  136 + // 绑定上传事件
  137 + $("#upload").click(uploadM);
  138 + // 绑定全部移到右边事件
  139 + $("#to_right").click(function(){
  140 + $("#left_div tbody tr:not(.muted)").click();
  141 + });
  142 + // 绑定全部移到左边事件
  143 + $("#to_left").click(function(){
  144 + $("#right_div tbody tr:not(.muted)").click();
  145 + });
  146 + // 查询方法
  147 + function searchM() {
  148 + // 清空已选定列表
  149 + $("#right_div table tbody").empty();
  150 + var params = {};
  151 + // 取得输入框的值
  152 + var inputs = $("ul.breadcrumb input");
  153 + // 遍历数组
  154 + $.each(inputs, function(i, element) {
  155 + params[$(element).attr("name")] = $(element).val();
  156 + });
  157 + var i = layer.load(2);
  158 + $get('/line', params, function(data) {
  159 + var bodyHtm = template('lineStation_list_temp', {
  160 + list : data.content
  161 + });
  162 + $("#left_div table tbody").empty();
  163 + $("#left_div table tbody").append(bodyHtm);
  164 + $("#left_div tbody tr:not(.muted)").click(_click);
  165 + layer.close(i);
  166 + });
  167 + }
  168 +
  169 + // 上传方法
  170 + function uploadM() {
  171 + var params = {};
  172 + // 取得输入框的值
  173 + var trs = $("#right_div tbody tr");
  174 + if (trs.length == 0) {
  175 + alert("请选择模板");
  176 + return;
  177 + }
  178 + // 遍历数组
  179 + $.each(trs, function(i, element) {
  180 + alert($(".ttInfoId", element).html());
  181 + });
  182 + }
  183 +
  184 + // 表格行的单击事件
  185 + function _click() {
  186 + var tmpTr = $(this).clone();
  187 + tmpTr.unbind("click").click(_click);
  188 + // 判断父DIV的ID
  189 + if ($(this).closest(".table-container").attr("id") == "left_div") {
  190 + // 把要移动行的class=".seq"的HTML的内容设成另一分类的最后一个序号
  191 + $(".seq",tmpTr).html($("#right_div tbody tr:not(.muted)").length + 1);
  192 + $("#right_div tbody").append(tmpTr);
  193 + nextAllChildSeqMinusOne($(this));
  194 + } else {
  195 + // 把要移动行的class=".seq"的HTML的内容设成另一分类的最后一个序号
  196 + $(".seq",tmpTr).html($("#left_div tbody tr:not(.muted)").length + 1);
  197 + $("#left_div tbody").append(tmpTr);
  198 + nextAllChildSeqMinusOne($(this));
  199 + }
  200 + $(this).remove();
  201 + }
  202 +
  203 + // 后面所有兄弟节点的中class=".seq"的HTML的内容自减 1
  204 + function nextAllChildSeqMinusOne(theElement){
  205 + $.each(theElement.nextAll(),function(i,e){
  206 + $(".seq",e).html($(".seq",e).html() - 1);
  207 + });
  208 + }
  209 + // 保存左边空表格
  210 + var leftDivTemplate = $("#left_div table").clone(true);
  211 + // 把左边表格的格式复制到右边
  212 + $("#right_div").append(leftDivTemplate);
  213 +
  214 +})();
0 215 \ No newline at end of file
... ...
src/main/resources/static/pages/trafficManage/js/shLineCodeList.js 0 → 100644
  View file @140f34b
  1 +/**
  2 + *
  3 + * @JSName : common.js(运管功能公共js)
  4 + *
  5 + * @Author : bsth@lq
  6 + *
  7 + * @Description : TODO(运管功能公共js)
  8 + *
  9 + * @Data : 2016年6月29日 上午9:21:17
  10 + *
  11 + * @Version 公交调度系统BS版 0.1
  12 + *
  13 + */
  14 +
  15 +(function(){
  16 + /**
  17 + * 取得编码-公司map
  18 + * gsmap["5"] = 南汇公司
  19 + * gsmap["5_3"] = 芦潮港分公司
  20 + */
  21 + function getBusMap(){
  22 + // 取得公司信息，替换公司编码
  23 + var gsmap = {};
  24 + $get('/business/all', null, function(array){
  25 + $.each(array, function(i, gs){
  26 + var k = gs.upCode + '_' + gs.businessCode;
  27 + if(gs.upCode === '88'){
  28 + k = gs.businessCode;
  29 + }
  30 + gsmap[k] = gs.businessName;
  31 + });
  32 + });
  33 + return gsmap;
  34 + }
  35 + var lines = new Array();
  36 + var gsmap = getBusMap();
  37 + // 取得所有线路
  38 + $get('/line/all', null, function(allLine) {
  39 + // 遍历数组
  40 + $.each(allLine, function(i, e) {
  41 + var companyCode = e.company;
  42 + e.company = gsmap[e.company];
  43 + e.brancheCompany = gsmap[companyCode+"_"+e.brancheCompany];
  44 + var line = '{"hex":"' + e.company + '","label":"' + e.name
  45 + + '"}';
  46 + var obj = jQuery.parseJSON(line);
  47 + lines[i] = obj;
  48 + });
  49 + });
  50 + // 给输入框绑定autocomplete事件
  51 + $("input[name='name_like']").autocompleter({
  52 + highlightMatches : true,
  53 + source : lines,
  54 + template : '{{ label }} <span>({{ hex }})</span>',
  55 + hint : true,
  56 + empty : false,
  57 + limit : 5,
  58 + });
  59 + // 设置autocompleter的宽度和输入框一样
  60 + $(".autocompleter").css("width",
  61 + $("input[name='name_like']").css("width"))
  62 + /**
  63 + * -----page : 当前页
  64 + *
  65 + * -----initPag :
  66 + *
  67 + */
  68 + var page = 0,initPag;
  69 + // 绑定查询事件
  70 + $("#search").click(searchM);
  71 + // 查询方法
  72 + function searchM() {
  73 + // 搜索参数集合
  74 + var params = {};
  75 + // 取得输入框的值
  76 + var inputs = $("ul.breadcrumb input");
  77 + // 遍历数组
  78 + $.each(inputs, function(i, element) {
  79 + params[$(element).attr("name")] = $(element).val();
  80 + });
  81 + page = 0;
  82 +
  83 + loadTableDate(params,true);
  84 + }
  85 +
  86 + /**
  87 + * 表格数据分页加载事件
  88 + *
  89 + * ------@param : 查询参数
  90 + *
  91 + * ------@isPon : 是否重新分页
  92 + *
  93 + */
  94 + function loadTableDate(param,isPon){
  95 + // 搜索参数
  96 + var params = {};
  97 + if(param)
  98 + params = param;
  99 + // 排序（按更新时间）
  100 + params['order'] = 'id';
  101 + // 记录当前页数
  102 + params['page'] = page;
  103 + // 弹出正在加载层
  104 + var i = layer.load(2);
  105 + // 异步请求获取表格数据
  106 + $.get('/line',params,function(result){
  107 + // 遍历数组
  108 + $.each(result.content, function(i, e) {
  109 + var companyCode = e.company;
  110 + e.company = gsmap[e.company];
  111 + e.brancheCompany = gsmap[companyCode+"_"+e.brancheCompany];
  112 + });
  113 + // 把数据填充到模版中
  114 + var tbodyHtml = template('shLineCode_list_temp',{list:result.content});
  115 + // 把渲染好的模版html文本追加到表格中
  116 + $('.table-container tbody').html(tbodyHtml);
  117 + // 是重新分页且返回数据长度大于0
  118 + if(isPon && result.content.length > 0){
  119 + // 重新分页
  120 + initPag = true;
  121 + // 分页栏
  122 + showPagination(result);
  123 + }
  124 + // 关闭弹出加载层
  125 + layer.close(i);
  126 + });
  127 + }
  128 +
  129 + /**
  130 + * 分页栏组件
  131 + *
  132 + */
  133 + function showPagination(data){
  134 + // 分页组件
  135 + $('#pagination').jqPaginator({
  136 + // 总页数
  137 + totalPages: data.totalPages,
  138 + // 中间显示页数
  139 + visiblePages: 6,
  140 + // 当前页
  141 + currentPage: page + 1,
  142 + first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
  143 + prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
  144 + next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
  145 + last: '<li class="last"><a href="javascript:void(0);">尾页<\/a><\/li>',
  146 + page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
  147 + onPageChange: function (num, type) {
  148 + if(initPag){
  149 + initPag = false;
  150 + return;
  151 + }
  152 + page = num - 1;
  153 + loadTableDate(null, false);
  154 + }
  155 + });
  156 + }
  157 +
  158 +})();
0 159 \ No newline at end of file
... ...
src/main/resources/static/pages/trafficManage/js/timeTempletUpload.js 0 → 100644
  View file @140f34b
  1 +/**
  2 + *
  3 + * @JSName : common.js(运管功能公共js)
  4 + *
  5 + * @Author : bsth@lq
  6 + *
  7 + * @Description : TODO(运管功能公共js)
  8 + *
  9 + * @Data : 2016年6月29日 上午9:21:17
  10 + *
  11 + * @Version 公交调度系统BS版 0.1
  12 + *
  13 + */
  14 +
  15 +(function(){
  16 + /**
  17 + * 取得编码-公司map
  18 + * gsmap["5"] = 南汇公司
  19 + * gsmap["5_3"] = 芦潮港分公司
  20 + */
  21 + function getBusMap(){
  22 + // 取得公司信息，替换公司编码
  23 + var gsmap = {};
  24 + $get('/business/all', null, function(array){
  25 + $.each(array, function(i, gs){
  26 + var k = gs.upCode + '_' + gs.businessCode;
  27 + if(gs.upCode === '88'){
  28 + k = gs.businessCode;
  29 + }
  30 + gsmap[k] = gs.businessName;
  31 + });
  32 + });
  33 + return gsmap;
  34 + }
  35 + var lines = new Array();
  36 + var gsmap = getBusMap();
  37 + console.log(gsmap);
  38 + // 取得所有线路
  39 + $get('/line/all', null, function(allLine) {
  40 + // 遍历数组
  41 + $.each(allLine, function(i, e) {
  42 + var companyCode = e.company;
  43 + e.company = gsmap[e.company];
  44 + e.brancheCompany = gsmap[companyCode+"_"+e.brancheCompany];
  45 + var line = '{"hex":"' + e.company + '","label":"' + e.name
  46 + + '"}';
  47 + var obj = jQuery.parseJSON(line);
  48 + lines[i] = obj;
  49 + });
  50 + });
  51 + // 给输入框绑定autocomplete事件
  52 + $("input[name='xl.name_eq']").autocompleter({
  53 + highlightMatches : true,
  54 + source : lines,
  55 + template : '{{ label }} <span>({{ hex }})</span>',
  56 + hint : true,
  57 + empty : false,
  58 + limit : 5,
  59 + });
  60 + // 设置autocompleter的宽度和输入框一样
  61 + $(".autocompleter").css("width",
  62 + $("input[name='xl.name_eq']").css("width"))
  63 + // 绑定查询事件
  64 + $("#search").click(searchM);
  65 + // 绑定上传事件
  66 + $("#upload").click(uploadM);
  67 + // 绑定全部移到右边事件
  68 + $("#to_right").click(function() {
  69 + $("#left_div tbody tr:not(.muted)").click();
  70 + });
  71 + // 绑定全部移到左边事件
  72 + $("#to_left").click(function() {
  73 + $("#right_div tbody tr:not(.muted)").click();
  74 + });
  75 + // 查询方法
  76 + function searchM() {
  77 + // 清空已选定列表
  78 + $("#right_div table tbody").empty();
  79 + var params = {};
  80 + // 取得输入框的值
  81 + var inputs = $("ul.breadcrumb input");
  82 + // 遍历数组
  83 + $.each(inputs, function(i, element) {
  84 + params[$(element).attr("name")] = $(element).val();
  85 + });
  86 + var i = layer.load(2);
  87 + $get('/spc', params, function(data) {
  88 + _dateFormat(data.content);
  89 + var bodyHtm = template('timeTemplet_list_temp', {
  90 + list : data.content
  91 + });
  92 + $("#left_div table tbody").empty();
  93 + $("#left_div table tbody").append(bodyHtm);
  94 + $("#left_div tbody tr:not(.muted)").click(_click);
  95 + layer.close(i);
  96 + });
  97 + }
  98 +
  99 + // 上传方法
  100 + function uploadM() {
  101 + var params = {};
  102 + // 取得输入框的值
  103 + var trs = $("#right_div tbody tr");
  104 + if (trs.length == 0) {
  105 + alert("请选择模板");
  106 + return;
  107 + }
  108 + // 遍历数组
  109 + $.each(trs, function(i, element) {
  110 + alert($(".ttInfoId", element).html());
  111 + });
  112 + }
  113 +
  114 + // 表格行的单击事件
  115 + function _click() {
  116 + var tmpTr = $(this).clone();
  117 + tmpTr.unbind("click").click(_click);
  118 + // 判断父DIV的ID
  119 + if ($(this).closest(".table-container").attr("id") == "left_div") {
  120 + // 把要移动行的class=".seq"的HTML的内容设成另一分类的最后一个序号
  121 + $(".seq", tmpTr).html(
  122 + $("#right_div tbody tr:not(.muted)").length + 1);
  123 + $("#right_div tbody").append(tmpTr);
  124 + nextAllChildSeqMinusOne($(this));
  125 + } else {
  126 + // 把要移动行的class=".seq"的HTML的内容设成另一分类的最后一个序号
  127 + $(".seq", tmpTr).html(
  128 + $("#left_div tbody tr:not(.muted)").length + 1);
  129 + $("#left_div tbody").append(tmpTr);
  130 + nextAllChildSeqMinusOne($(this));
  131 + }
  132 + $(this).remove();
  133 + }
  134 +
  135 + // 后面所有兄弟节点的中class=".seq"的HTML的内容自减 1
  136 + function nextAllChildSeqMinusOne(theElement) {
  137 + $.each(theElement.nextAll(), function(i, e) {
  138 + $(".seq", e).html($(".seq", e).html() - 1);
  139 + });
  140 + }
  141 + // 保存左边空表格
  142 + var leftDivTemplate = $("#left_div table").clone(true);
  143 + // 把左边表格的格式复制到右边
  144 + $("#right_div").append(leftDivTemplate);
  145 + //转换时间格式
  146 + function _dateFormat(list) {
  147 + var fs = 'YYYY-MM-DD HH:mm';
  148 + $.each(list, function(i, obj) {
  149 + obj.ttInfo.qyrq = moment(obj.ttInfo.qyrq).format(fs);
  150 + });
  151 + }
  152 +})();
0 153 \ No newline at end of file
... ...
src/main/resources/static/pages/trafficManage/lineStationUpload.html 0 → 100644
  View file @140f34b
  1 +<link href="css/trafficManage.css" rel="stylesheet" type="text/css" />
  2 +<link href="css/autocompleter.css" rel="stylesheet" type="text/css" />
  3 +<ul class="page-breadcrumb breadcrumb">
  4 + <li><a href="/pages/home.html" data-pjax>首页</a> <i class="fa fa-circle"></i></li>
  5 + <li><span class="active">运维管理</span> <i class="fa fa-circle"></i></li>
  6 + <li><span class="active">线路停靠站上传</span></li>
  7 +</ul>
  8 +<div class="tab_line">
  9 + <div class="col-md-12">
  10 + <ul class="breadcrumb">
  11 + <li>公司:</li>
  12 + <li><select name="company_eq" class="form-control" id="companySelect"></select></li>
  13 + <li>分公司：</li>
  14 + <li><select name="brancheCompany_eq" class="form-control" id="brancheCompanySelect"></select></li>
  15 + <li>线路名称:</li>
  16 + <li><input type="text" class="form-control form-filter input-sm"
  17 + name="name_eq" placeholder="请输入线路名称" maxlength="40" /></li>
  18 + <li><a class="btn btn-circle blue" id="search">查询</a></li>
  19 + <li><a class="btn btn-circle red" id="upload">上传</a></li>
  20 + </ul>
  21 + </div>
  22 + <!-- Begin: left-div -->
  23 + <div class="col-md-5 panel-wrap" style="height: 60%;">
  24 + <div class="_panel">
  25 + <div class="_head" style="color: #2765A7;">待选上传站点线路列表</div>
  26 + <div class="table-container" id="left_div">
  27 + <table
  28 + class="table table-striped table-bordered table-advance pb-table head">
  29 + <thead>
  30 + <tr>
  31 + <th width="5%">#</th>
  32 + <th width="20%">线路编码</th>
  33 + <th width="15%">线路名称</th>
  34 + </tr>
  35 + </thead>
  36 + <tbody>
  37 + </tbody>
  38 + </table>
  39 + </div>
  40 + </div>
  41 + </div>
  42 + <div class="col-md-2" style="height: 60%;">
  43 + <ul class="breadcruma divVerHorCenter">
  44 + <li><a class="btn btn-circle blue btn-outline" id="to_right">>></a></li>
  45 + <li><a class="btn btn-circle blue btn-outline" id="to_left"><<</a></li>
  46 + </ul>
  47 + </div>
  48 + <!-- End: left-div -->
  49 + <!-- Begin: right-div -->
  50 + <div class="col-md-5 panel-wrap" style="height: 60%;">
  51 + <div class="_panel">
  52 + <div class="_head" style="color: #2765A7;">已选上传站点线路列表</div>
  53 + <div class="table-container" id="right_div"></div>
  54 + </div>
  55 + </div>
  56 + <!-- End: right-div -->
  57 +</div>
  58 +<script id="lineStation_list_temp" type="text/html">
  59 +{{each list as obj i}}
  60 +<tr>
  61 + <td class="seq" style="vertical-align: middle;">
  62 + {{i+1}}
  63 + </td>
  64 + <td>
  65 + {{obj.lineCode}}
  66 + </td>
  67 + <td class="ttInfoId">
  68 + {{obj.name}}
  69 + </td>
  70 +</tr>
  71 +{{/each}}
  72 +{{if list.length == 0}}
  73 +<tr class="muted">
  74 + <td colspan=5 style="text-align: center;"><h6>没有找到相关数据</h6></td>
  75 +</tr>
  76 +{{/if}}
  77 + </script>
  78 +<script src="./js/lineStationUpload.js"></script>
... ...
src/main/resources/static/pages/trafficManage/shLineCodeList.html 0 → 100644
  View file @140f34b
  1 +<link href="css/trafficManage.css" rel="stylesheet" type="text/css" />
  2 +<link href="css/autocompleter.css" rel="stylesheet" type="text/css" />
  3 +<ul class="page-breadcrumb breadcrumb">
  4 + <li><a href="/pages/home.html" data-pjax>首页</a> <i
  5 + class="fa fa-circle"></i></li>
  6 + <li><span class="active">运维管理</span> <i class="fa fa-circle"></i></li>
  7 + <li><span class="active">上海市线路编码查询</span></li>
  8 +</ul>
  9 +<div class="tab_line">
  10 + <div class="col-md-12">
  11 + <ul class="breadcrumb">
  12 + <li>线路名称:</li>
  13 + <li><input type="text" class="form-control form-filter input-sm"
  14 + name="name_like" placeholder="请输入线路名称" maxlength="40" /></li>
  15 + <li><a class="btn btn-circle blue" id="search">查询</a></li>
  16 + </ul>
  17 + </div>
  18 + <div class="col-md-12 panel-wrap">
  19 + <div class="_panel">
  20 + <div class="_head" style="color: #2765A7;">待选线路模板列表</div>
  21 + <div class="table-container">
  22 + <table
  23 + class="table table-striped table-bordered table-advance pb-table head">
  24 + <thead>
  25 + <tr>
  26 + <th width="5%">序号</th>
  27 + <th width="20%">线路名称</th>
  28 + <th width="15%">所属公司</th>
  29 + <th width="25%">调度方式</th>
  30 + <th>上海市线路编码</th>
  31 + </tr>
  32 + </thead>
  33 + <tbody>
  34 + </tbody>
  35 + </table>
  36 + <div style="text-align: right;">
  37 + <ul id="pagination" class="pagination"></ul>
  38 + </div>
  39 + </div>
  40 + </div>
  41 + </div>
  42 +</div>
  43 +<script id="shLineCode_list_temp" type="text/html">
  44 +{{each list as obj i}}
  45 +<tr>
  46 + <td class="seq" style="vertical-align: middle;">
  47 + {{i+1}}
  48 + </td>
  49 + <td>
  50 + {{obj.name}}
  51 + </td>
  52 + <td class="ttInfoId">
  53 + {{obj.company}}
  54 + </td>
  55 + <td>
  56 + 全程
  57 + </td>
  58 + <td >
  59 + {{obj.shanghaiLinecode}}
  60 + </td>
  61 +</tr>
  62 +{{/each}}
  63 +{{if list.length == 0}}
  64 +<tr class="muted">
  65 + <td colspan=5 style="text-align: center;"><h6>没有找到相关数据</h6></td>
  66 +</tr>
  67 +{{/if}}
  68 + </script>
  69 +<script src="./js/shLineCodeList.js"></script>
0 70 \ No newline at end of file
... ...
src/main/resources/static/pages/trafficManage/timeTempletUpload.html 0 → 100644
  View file @140f34b
  1 +<link href="css/trafficManage.css" rel="stylesheet" type="text/css" />
  2 +<link href="css/autocompleter.css" rel="stylesheet" type="text/css" />
  3 +<ul class="page-breadcrumb breadcrumb">
  4 + <li><a href="/pages/home.html" data-pjax>首页</a> <i
  5 + class="fa fa-circle"></i></li>
  6 + <li><span class="active">运维管理</span> <i class="fa fa-circle"></i></li>
  7 + <li><span class="active">时刻模板上传</span></li>
  8 +</ul>
  9 +<div class="tab_line">
  10 + <div class="col-md-12">
  11 + <ul class="breadcrumb">
  12 + <li>线路名称:</li>
  13 + <li><input type="text" class="form-control form-filter input-sm"
  14 + name="xl.name_eq" placeholder="请输入线路名称" maxlength="40" /></li>
  15 + <li>模板名称（关键字）：</li>
  16 + <li><input type="text" class="form-control form-filter input-sm"
  17 + name="ttInfo.name_like" maxlength="40" /></li>
  18 + <li><a class="btn btn-circle blue" id="search">查询</a></li>
  19 + <li><a class="btn btn-circle red" id="upload">上传</a></li>
  20 + </ul>
  21 + </div>
  22 + <!-- Begin: left-div -->
  23 + <div class="col-md-5 panel-wrap" style="height: 60%;">
  24 + <div class="_panel">
  25 + <div class="_head" style="color: #2765A7;">待选线路模板列表</div>
  26 + <div class="table-container" id="left_div">
  27 + <table
  28 + class="table table-striped table-bordered table-advance pb-table head">
  29 + <thead>
  30 + <tr>
  31 + <th width="5%">#</th>
  32 + <th width="20%">线路名称</th>
  33 + <th width="15%">模板ID</th>
  34 + <th width="25%">模板名称</th>
  35 + <th>启用日期</th>
  36 + </tr>
  37 + </thead>
  38 + <tbody>
  39 + </tbody>
  40 + </table>
  41 + </div>
  42 + </div>
  43 + </div>
  44 + <div class="col-md-2" style="height: 60%;">
  45 + <ul class="breadcruma divVerHorCenter">
  46 + <li><a class="btn btn-circle blue btn-outline" id="to_right">>></a></li>
  47 + <li><a class="btn btn-circle blue btn-outline" id="to_left"><<</a></li>
  48 + </ul>
  49 + </div>
  50 + <!-- End: left-div -->
  51 + <!-- Begin: right-div -->
  52 + <div class="col-md-5 panel-wrap" style="height: 60%;">
  53 + <div class="_panel">
  54 + <div class="_head" style="color: #2765A7;">已选线路模板列表</div>
  55 + <div class="table-container" id="right_div"></div>
  56 + </div>
  57 + </div>
  58 + <!-- End: right-div -->
  59 +</div>
  60 +<script id="timeTemplet_list_temp" type="text/html">
  61 +{{each list as obj i}}
  62 +<tr>
  63 + <td class="seq" style="vertical-align: middle;">
  64 + {{i+1}}
  65 + </td>
  66 + <td>
  67 + {{obj.xl.name}}
  68 + </td>
  69 + <td class="ttInfoId">
  70 + {{obj.ttInfo.id}}
  71 + </td>
  72 + <td>
  73 + {{obj.ttInfo.name}}
  74 + </td>
  75 + <td >
  76 + {{obj.ttInfo.qyrq}}
  77 + </td>
  78 +</tr>
  79 +{{/each}}
  80 +{{if list.length == 0}}
  81 +<tr class="muted">
  82 + <td colspan=5 style="text-align: center;"><h6>没有找到相关数据</h6></td>
  83 +</tr>
  84 +{{/if}}
  85 + </script>
  86 +<script src="./js/timeTempletUpload.js"></script>
0 87 \ No newline at end of file
... ...