设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › WEB开发 › .NET讨论 › 横向滑动时,为什么表格头不随着滚动条移动呢? ...
返回列表 发新帖
查看: 3841|回复: 1
打印 上一主题 下一主题

横向滑动时,为什么表格头不随着滚动条移动呢? [复制链接]

seseares

Rank: 3Rank: 3
跳转到指定楼层
楼主
发表于 2012-8-22 18:42:17 |只看该作者 |倒序浏览

详细代码请见如下:

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head><title>

  4. </title>   
  5.     <script src="/Scripts/Miniui/boot.js" type="text/javascript"></script>   
  6.     <style type="text/css">
  7.     html,body
  8.     {
  9.         width:100%;
  10.         height:100%;
  11.         border:0;
  12.         margin:0;
  13.         padding:0;
  14.         overflow:visible;
  15.     }
  16.     </style>
  17.    
  18.     </head>
  19. <body>

  21.         
  22.     <div class="mini-toolbar" style="padding: 2px; border: 0;">
  23.         <table style="width: 100%;">
  24.             <tr>
  25.                 <td style="width: 100%;">
  26.                     <a class="mini-button" iconcls="icon-add" onclick="addRow()" plain="true">添加</a>
  27.                     <a class="mini-button" iconcls="icon-save" onclick="saveData()" plain="true">保存</a>
  28.                     <a class="mini-button" iconcls="icon-remove" onclick="removeRow()" plain="true">删除</a>
  29.                     <a class="mini-button" iconcls="icon-reload" plain="true" onclick="grid.reload()">刷新</a>
  30.                 </td>
  31.                 <td style="white-space: nowrap;">
  32.                     <label style="font-family: Verdana;">
  33.                         编码或名称:
  34.                     </label>
  35.                     <input class="mini-textbox" id="key" onenter="onKeyEnter" />
  36.                     <a class="mini-button" iconcls="icon-search" plain="true" onclick="search()">查询</a>
  37.                 </td>
  38.             </tr>
  39.         </table>
  40.     </div>
  41.     <!--撑满页面-->
  42.     <div class="mini-fit" style="background: red; height: 100px;">
  43.         <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 100%;" url="/data/u.aspx?method=Search"
  44.             idfield="MenuID" sizelist="[5,10,20,50]" pagesize="20" fitcolumns="false" allowcellselect="true"
  45.             multiselect="true" allowcelledit="true" oncellbeginedit="OnCellBeginEdit" allowalternating="true">
  46.             <div property="columns">
  47.                 <div type="indexcolumn" headeralign="center">
  48.                     ID</div>
  49.                 <!--<div type="checkcolumn" ></div> -->
  50.                 <div field="MenuID" width="120" headeralign="left" allowsort="true">
  51.                     编号</div>
  52.                 <div field="ParentID" width="120" headeralign="left" allowsort="true">
  53.                     父级编号<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
  54.                 <div field="MenuName" width="120" headeralign="left" allowsort="true">
  55.                     名称<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
  56.                 <div field="Url" width="300" headeralign="left" allowsort="true">
  57.                     链接地址<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
  58.                 <div field="Sort" width="50" headeralign="left" allowsort="true">
  59.                     排序<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
  60.                 <div field="Description" width="150" headeralign="left">
  61.                     描述<input property="editor" class="mini-textbox" style="width: 100%;" /></div>
  62.                 <div type="checkboxcolumn" field="Valid" truevalue="1" falsevalue="0" width="40"
  63.                     headeralign="center" allowsort="true">
  64.                     生效</div>
  65.                 <div field="CreateDate" width="150" headeralign="left" dateformat="yyyy-MM-dd hh:mm:ss"
  66.                     allowsort="true">
  67.                     创建时间</div>
  68.                 <div field="LastModDate" width="150" headeralign="left" dateformat="yyyy-MM-dd hh:mm:ss"
  69.                     allowsort="true">
  70.                     最后修改时间</div>
  71.             </div>
  72.         </div>
  73.     </div>

  75.         
  76.     <script type="text/javascript">
  77.         mini.parse();
  78.         var grid = mini.get("datagrid1");
  79.         grid.load();

  81.         //搜索按钮事件        
  82.         function search() {
  83.             var key = mini.get("key").getValue();
  84.             grid.load({ key: key });

  86.             var datagrid1 = mini.get("datagrid1");
  87.             var data = datagrid1.getData();
  88.             var json = mini.encode(data);


  91.         }
  92.         function OnCellBeginEdit(e) {
  93.             var record = e.record, field = e.field;
  94.             if (field == "MenuID" && record._state != "added") {
  95.                 e.cancel = true;    //如果修改则不能编辑
  96.             }
  97.         }
  98.         //查询框回车事件
  99.         function onKeyEnter(e) {
  100.             search();
  101.         }

  103.         //新增
  104.         function addRow() {
  105.             var newRow = { name: "New Row" };
  106.             grid.addRow(newRow, 0);
  107.         }
  108.         //修改
  109.         function editRow() {
  110.             var row = grid.getSelected();

  112.             if (row) {
  113.                 grid.cancelEdit();
  114.                 grid.beginEditRow(row);
  115.             } else {
  116.                 alert("请选中记录");
  117.             }

  119.         }
  120.         //删除
  121.         function removeRow() {
  122.             var rows = grid.getSelecteds();
  123.             if (rows.length > 0) {
  124.                 if (confirm("确定删除选中记录？")) {

  126.                     if (rows.length > 0) {
  127.                         grid.removeRows(rows, true);
  128.                     }
  129.                 }
  130.             } else {
  131.                 alert("请选中一条记录");
  132.             }
  133.         }
  134.         //保存
  135.         function saveData() {

  137.             var data = grid.getChanges();
  138.             var json = mini.encode(data);
  139.             grid.loading("保存中，请稍后......");

  141.             $.ajax({
  142.                 url: "/data/Admin/u.aspx?method=Save",
  143.                 data: { data: json },
  144.                 type: "post",
  145.                 success: function (text) {
  146.                     var o = mini.decode(text);
  147.                     if (typeof (o.error) != "undefined") {
  148.                         alert(o.msg);
  149.                         grid.unmask();
  150.                     } else {
  151.                         grid.reload();
  152.                     }
  153.                 },
  154.                 error: function (jqXHR, textStatus, errorThrown) {
  155.                     alert(jqXHR.responseText);
  156.                 }
  157.             });
  158.         }
  159.     </script>

  161. </body>
  162. </html>
复制代码


举报

factory

Rank: 8Rank: 8
沙发
发表于 2012-8-23 09:55:34 |只看该作者
本帖最后由 factory 于 2012-8-23 10:04 编辑

你把fitcolumns="false"这个属性去掉
页面必须要加上<!DOCTYPE ........>

举报

返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-6-24 20:37 , Processed in 1.053773 second(s), 9 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部