Skip to content

Instantly share code, notes, and snippets.

@newpost

newpost/jqgrid-with-search

Created June 9, 2020 03:30
Show Gist options
  • Save newpost/10b90c8e02d450d97372a6db1c92c7b0 to your computer and use it in GitHub Desktop.
Save newpost/10b90c8e02d450d97372a6db1c92c7b0 to your computer and use it in GitHub Desktop.
Download ZIP
jqgrid-with-search
@newpost
Copy link
Author

newpost commented Jun 9, 2020

存在一个bug:日期选择后在过滤条件里面日期为空。

@newpost
Copy link
Author

newpost commented Jun 9, 2020 •
edited
Loading 

<!DOCTYPE html>

<html lang="en">
  <head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script
      type="text/ecmascript"
      src="http://code.jquery.com/jquery-2.1.1.min.js"
    ></script>
    <!-- We support more than 40 localizations -->
    <script
      type="text/ecmascript"
      src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"
    ></script>
    <!-- This is the Javascript file of jqGrid -->
    <script
      type="text/ecmascript"
      src="http://www.guriddo.net/demo/js/trirand/src/jquery.jqGrid.js"
    ></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
    />

    <!-- The link to the CSS that the grid needs -->
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css"
    />
    <link
      href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css"
      rel="stylesheet"
    />
    <link
      id="bsdp-css"
      href="https://unpkg.com/[email protected]/dist/css/bootstrap-datepicker3.min.css"
      rel="stylesheet"
    />
    <script>
      $.jgrid.defaults.width = 780;
    </script>

    <script src="https://github.com/twbs/bootstrap/blob/v3.3.1/dist/js/bootstrap.min.js"></script>
    <script src="https://raw.githubusercontent.com/twbs/bootstrap/v3.3.1/js/collapse.js"></script>
    <script src="https://github.com/twbs/bootstrap/raw/v3.3.1/js/transition.js"></script>
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>

    <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/js/bootstrap-datepicker.min.js"></script>
    <script
      src="https://unpkg.com/[email protected]/dist/locales/bootstrap-datepicker.zh-CN.min.js"
      charset="UTF-8"
    ></script>
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Million Rows from a REST service</title>
  </head>
  <body>
    <div style="margin-left: 20px;">
      <table id="jqGrid"></table>
      <div id="jqGridPager"></div>
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" id="datetimepicker4" />
          </div>
          <script type="text/javascript">
            $(function () {
              $("#datetimepicker4").datetimepicker({
                format: "YYYY-MM-DD",
                locale: "zh-cn",
              });
            });
          </script>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#jqGrid").jqGrid({
          url:
            "http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders",
          mtype: "GET",
          styleUI: "Bootstrap",
          datatype: "jsonp",
          colModel: [
            { label: "OrderID", name: "OrderID", key: true, width: 75 },
            { label: "Customer ID", name: "CustomerID", width: 150 },
            {
              label: "Order Date",
              name: "OrderDate",
              width: 150,
              sorttype: "date",
              searchoptions: {
                // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                // use it to place a third party control to customize the toolbar
                // dataInit: function (element) {
                //   $(element).datetimepicker({
                //     format: "YYYY-MM-DD",
                //     locale: "zh-cn",
                //   });
                // },
                dataInit: function (element) {
                  $(element).datepicker({
                    language: "zh-CN",
                    autoclose: true,
                  });
                },
              },
            },
            { label: "Freight", name: "Freight", width: 150 },
            { label: "Ship Name", name: "ShipName", width: 150 },
          ],
          viewrecords: true,
          height: 250,
          rowNum: 20,
          pager: "#jqGridPager",
        });

        // activate the build in search with multiple option
        $("#jqGrid").navGrid(
          "#jqGridPager",
          {
            search: true, // show search button on the toolbar
            add: false,
            edit: false,
            del: false,
            refresh: true,
          },
          {}, // edit options
          {}, // add options
          {}, // delete options
          { multipleSearch: true } // search options - define multiple search
        );
      });
    </script>
  </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment