jqGrid插件，modal窗口点击问题

最新推荐文章于 2020-02-19 16:59:20 发布

chucai1933

最新推荐文章于 2020-02-19 16:59:20 发布

阅读量608

点赞数

文章标签： javascript c# ui ViewUI

原文链接：https://my.oschina.net/qizaizai/blog/819868

版权

图（测试用的）：

页面效果

源码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>DEMO</title>
      <!--<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />-->
      <link rel="stylesheet" href="Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid-bootstrap.css" />
      <!--<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css" />-->
      <link rel="stylesheet" href="Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid-bootstrap-ui.css" />
      
      <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
      <link rel="stylesheet" type="text/css" href="Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid.css" />
      <style>
         .main{ margin: 50px; }
         .ui-jqdialog{background: salmon;}
         .ui-jqgrid .ui-jqgrid-caption{ text-align: center; line-height: 37px; }
         .ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
            border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;
         }
         .ui-jqdialog .ui-jqdialog-titlebar-close span{color: #fff; font-size: 18px;}
         .ui-jqdialog-content td.EditButton{
            height: 45px; display: block;
         } 
         .ui-jqgrid .ui-jqgrid-view input{ margin-left: 8px; margin-top: 4px; }
         .ui-jqgrid .ui-pg-input{ height: 19px; text-align: center;}
         .fm-button { height: 38px; }
      </style>
   </head>
<body>
   <div class="main" id="main">
   <!--jqGrid所在-->
   <table id="grid-table"></table>
   <!--jqGrid 浏览导航栏所在-->
   <div id="grid-pager"></div>
   </div>
   <script src="Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
   <script src="Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
      $.jgrid.defaults.styleUI = "Bootstrap";
      
      $('.ui-widget-overlay').click(function(){
         return;
      });
   
      //当 datatype 为"local" 时需填写 
      var grid_data = [{
         id: "00001",
         type: "退货出库",
         pay: "1000",
         name: "abc",
         text: "ccc"
      }, {
         id: "00002",
         type: "退货出库",
         pay: "1000",
         name: "abc",
         text: "aaa"
      }, {
         id: "00003",
         type: "退货出库",
         pay: "1040.06",
         name: "abc",
         text: "ddd"
      }];
      var grid_selector = "#grid-table";
      var pager_selector = "#grid-pager";
      $(document).ready(function() {
         $("#grid-table").jqGrid(
         {
            data: grid_data, //当 datatype 为"local" 时需填写 
            datatype: "local", //数据来源，本地数据（local，json,jsonp,xml等）
            height: 200, //高度，表格高度。可为数值、百分比或'auto'
            //mtype:"GET",//提交方式
            colNames: ['出库单号', '出库类型', '总金额', '申请人（单位）', '备注'],
            colModel: [{
            name: 'id',
            index: 'id', //索引。其和后台交互的参数为sidx
            key: true, //当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略
            width: 100,
            editable: false,
            editoptions: {
            size: "20",
            maxlength: "30"}
            }, 
            {
            name: 'type',
            index: 'type',
            width: 200, //宽度
            editable: true, //是否可编辑
            edittype: "select", //可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.s
            editoptions: {
            value: "1:采购入库;2:退用入库"}
            }, 
            {
            name: 'pay',
            index: 'pay',
            width: 60,
            sorttype: "double",
            editable: true
            }, 
            {
            name: 'name',
            index: 'name',
            width: 150,
            editable: true,
            editoptions: {
            size: "20",
            maxlength: "30"}
            }, 
            {
            name: 'text',
            index: 'text',
            width: 250,
            sortable: false,
            editable: true,
            edittype: "textarea",
            editoptions: {
            rows: "2",
            cols: "10"}
         }, 
         ],
         viewrecords: true, //是否在浏览导航栏显示记录总数
         rowNum: 10, //每页显示记录数
         rowList: [10, 20, 30], //用于改变显示行数的下拉列表框的元素数组。
         pager: pager_selector, //分页、按钮所在的浏览导航栏
         altRows: true, //设置为交替行表格,默认为false
         //toppager: true,//是否在上面显示浏览导航栏
         multiselect: true, //是否多选
         //multikey: "ctrlKey",//是否只能用Ctrl按键多选
         multiboxonly: true, //是否只能点击复选框多选
         // subGrid : true, 
         //sortname:'id',//默认的排序列名
         //sortorder:'asc',//默认的排序方式（asc升序，desc降序）
         caption: "采购退货单列表", //表名
         autowidth: true //自动宽
         });
         //浏览导航栏添加功能部分代码
         $(grid_selector).navGrid(pager_selector, {
            search: true, // 检索
            add: true, //添加 （只有editable为true时才能显示属性）
            edit: true, //修改（只有editable为true时才能显示属性）
            del: true, //删除
            refresh: true //刷新
            }, 
            {}, // edit options
            {}, // add options
            {}, // delete options
            {
               multipleSearch: true
            } // search options - define multiple search
         );
      });
   </script>
</body>
</html>

经过：

刚开始以为是 bootstrap 中 modal 的问题，用了 bs 的方法

$("#myModal").modal({
backdrop: 'static', /*背景变暗，且关闭模态窗体后才能操作页面上的内容*/
});

还是不行，又用了好多方法，就是没想过看插件。、

解决方案：

看了 jqModal.js 源码，才知道，可以用 jqmShow() 这个方法解决。

实际项目解决的代码如图：