jQuery MiniUI

标题: datagrid和mini-fit [打印本页]

作者: hk5138 时间: 2014-6-12 10:47:56 标题: datagrid和mini-fit

datagrid render 到mini-fit里面时 datagrid的高度不会自适应,折腾了好久,求工程师们指点

         var columns = [

                     { type: "indexcolumn", width: 30, allowResize: false },
                     { type: "checkcolumn" },
                     { header: "客户名称", field: "CUSTOM", width: "20%", sortable: true },
                     { header: "商机名称", field: "BUSINESSNAME", width: 200, sortable: true },
                     { header: "活动名称", field: "ACTIVITYTHEME", width: "15%", sortable: true },
                     { header: "活动类型", field: "ACTIVITYTYPE", width: 200, sortable: true },
                     { header: "活动方式", field: "MODELACTION", width: "15%", sortable: true },

                     { header: "开始日期", field: "STARTTIME", width: "10%", sortable: true },
                     { header: "结束日期", field: "ENDTIME", width: "10%", sortable: true }
         ];

         grid = new mini.ux.AimDataGrid({
            idProperty: "Id",
            dsname: "CustomList",
            columns: columns,
            data: testData,
            aimpager: 'aimpager',
            schpanel: "schPanel",
            renderTo: "grid1"
         });

html:
<div id="grid1" class="mini-fit" style="background:red;height:100px;">
      </div>

mini.ux.AimDataGrid定义:
mini.ux.AimDataGrid = function (config) {
mini.ux.AimDataGrid.superclass.constructor.call(this);
this.initComponents(config);
this.initEvent();
}

mini.extend(mini.ux.AimDataGrid, mini.DataGrid, {
initComponents: function (config) {
      config = config || {};
      config.idField = config.idProperty;
      config.multiSelect = !(config.multiSelect == false);
      config.allowAlternating = !(config.allowAlternating == false);
      config.showPager = false;          //不使用grid自带分页控件
      config.showHGridLines = !(config.showHGridLines == false);
      config.showVGridLines = (config.showVGridLines == true);

      this.set(config);

      if (config.aimpager) {//初始化分页控件区
         var pager = new mini.ux.AimPager({});
         var owner = this;
         pager.on("pagechanged", function (e) {
            var pinfo = {};
            pinfo.start = e.pageIndex * e.pageSize;
            pinfo.limit = e.pageSize;
            owner.reload(pinfo);
         });
         pager.render(owner.aimpager);
      }

      if (config.renderTo) {
         this.render(config.renderTo);
      }
      if (config.schpanel) {//初始化查询区
         initAimQry(this);
      }
},
initEvent: function () {
      //绑定表头点击事件以实现排序,
      this.on("headercellclick", function (sender) {
         var column = sender.column;
         var dir, sort;
         if (column.sortable) {
            var oldField = grid.sortField;
            if (oldField != column.field) {
                  grid.setSortField(column.field);
                  grid.setSortOrder("asc");
            } else {
                  grid.setSortOrder(grid.sortOrder == "asc" ? "desc" : "asc");
            }
            dir = grid.sortOrder == "asc" ? "ASC" : "DESC";
            sort = grid.sortField;
            grid.reload({ dir: dir, sort: sort });
         }
      });
},
reload: function (params) {
      AimReloadGrid(this, params);
},
GetModifiedDataStringArr: function (recs) {
      var dt = [];
      var rows = recs || this.getChanges();

      $.each(rows, function () {
         dt.push($.getJsonString(this));
      });

      return dt;
}
});

mini.regClass(mini.ux.AimDataGrid, "aimgrid");

作者: factory 时间: 2014-6-12 11:05:32

1.mini-fit不需要给他设置height,他的height是自动根据剩余高度计算出来的,你给他设置height也没用

2.fit内的表格的height设置为100%

作者: hk5138 时间: 2014-6-12 11:07:29

factory 发表于 2014-6-12 11:05
1.mini-fit不需要给他设置height,他的height是自动根据剩余高度计算出来的,你给他设置height也没用

2.fit ...

试过了都没用,直接html的 mini-datagrid的就行,render的就不管用了

作者: hk5138 时间: 2014-6-12 11:20:51

hk5138 发表于 2014-6-12 11:07
试过了都没用,直接html的 mini-datagrid的就行,render的就不管用了

mini-grid-viewport的height一直是auto 手动设置成100%也是可以的

作者: hk5138 时间: 2014-6-12 11:25:57

hk5138 发表于 2014-6-12 11:20
mini-grid-viewport的height一直是auto 手动设置成100%也是可以的

不好意思好了,自己打height的时候打成了hright,原谅我吧

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)