jQuery MiniUI

标题: 弹出面板支持多选（bug) [打印本页]

作者: chen_m2 时间: 2012-3-5 22:04:53 标题: 弹出面板支持多选（bug)

期望效果：弹出面板支持多选。
实际效果：出现check按钮，但是不支持多选，如图
[attach]1[/attach]
代码如下：

<script src="UsesWindow.js" type="text/javascript"></script>
UsersWindow = function () {
UsersWindow.superclass.constructor.call(this);
this.initControls();
this.initEvents();
}
mini.extend(UsersWindow, mini.Window, {
url: "",
keyField: "key",
multiSelect:true,
width: 550,
//height: 305,
showModal: true,
title: "选择用户",
bodyStyle: "padding:0;background:#eee;",
initControls: function () {
      var bodyEl = this.getBodyEl();
      //顶部搜索
      var topHtml =
         '<div style="padding:5px;text-align:center;">'
            + '<span>姓名：</span> '
            + '<input name="keyText" class="mini-textbox" style="width:160px;"/> '
            + '<a name="searchBtn" class="mini-button">查找</a>    '
         + '</div>';
      jQuery(bodyEl).append(topHtml);
      //分页表格
      this.grid = new mini.DataGrid();
      this.grid.set({
         style: "width: 100%;height: 200px",
         borderStyle: "border-left:0;border-right:0;",
         columns: [
            { type: "checkcolumn", header: "#", headerAlign: "center" },
            { header: "帐号", field: "UserName" },
            { header: "姓名", field: "UserFullName" }
         ]
      });
      this.grid.setUrl(this.url);
      this.grid.render(bodyEl);
      //底部按钮
      var footerHtml =
         '<div style="padding:8px;text-align:center;">'
            + '<a name="okBtn" class="mini-button" style="width:60px;">确定</a>    '
            + '<a name="cancelBtn" class="mini-button" style="width:60px;margin-left:20px;">取消</a>    '
         + '</div>';
      jQuery(bodyEl).append(footerHtml);
      mini.parse(this.el);
      //组件对象
      this.okBtn = mini.getbyName("okBtn", this);
      this.cancelBtn = mini.getbyName("cancelBtn", this);
      this.searchBtn = mini.getbyName("searchBtn", this);
      this.keyText = mini.getbyName("keyText", this);
},
initEvents: function () {
      this.searchBtn.on("click", function (e) {
         var key = this.keyText.getValue();
         this.search(key);
      }, this);
      this.keyText.on("enter", function (e) {
         var key = this.keyText.getValue();
         this.search(key);
      }, this);
      /////////////////////////////////////
      this.okBtn.on("click", function (e) {
         var ret = true;
         if (this.callback) ret = this.callback('ok');
         if (ret !== false) {
            this.hide();
         }
      }, this);
      this.cancelBtn.on("click", function (e) {
         var ret = true;
         if (this.callback) ret = this.callback('cancel');
         if (ret !== false) {
            this.hide();
         }
      }, this);
      this.on("closableclick", function (e) {
         e.cancel = true;
         var ret = true;
         if (this.callback) ret = this.callback('close');
         if (ret !== false) {
            this.hide();
         }
      }, this);
},
setUrl: function (value) {
      this.url = value;
      this.grid.setUrl(value);
},
setKeyField: function (value) {
      this.keyField = value;
},
search: function (key) {
      var args = {};
      args[this.keyField] = key;
      this.grid.load(args);
},
setData: function (data, callback) {
      this.callback = callback;
},
getData: function () {
      var row = this.grid.getSelected();
      return row;
}
});

作者: chen_m2 时间: 2012-3-5 22:09:04

自己顶，原因找到了。multiSelect: true,写错地方了。

UsersWindow = function () {
UsersWindow.superclass.constructor.call(this);
this.initControls();
this.initEvents();
}
mini.extend(UsersWindow, mini.Window, {
url: "",
keyField: "key",

width: 550,
//height: 305,
showModal: true,
title: "选择用户",
bodyStyle: "padding:0;background:#eee;",
initControls: function () {
      var bodyEl = this.getBodyEl();

      //顶部搜索
      var topHtml =
         '<div style="padding:5px;text-align:center;">'
            + '<span>姓名：</span> '
            + '<input name="keyText" class="mini-textbox" style="width:160px;"/> '
            + '<a name="searchBtn" class="mini-button">查找</a>    '
         + '</div>';
      jQuery(bodyEl).append(topHtml);

      //分页表格
      this.grid = new mini.DataGrid();
      this.grid.set({
         style: "width: 100%;height: 200px",
         borderStyle: "border-left:0;border-right:0;",
        multiSelect: true,
         columns: [
            { type: "checkcolumn", header: "#", headerAlign: "center" },
            { header: "帐号", field: "UserName" },
            { header: "姓名", field: "UserFullName" }
         ]
      });
      this.grid.setUrl(this.url);
      this.grid.render(bodyEl);

      //底部按钮
      var footerHtml =
         '<div style="padding:8px;text-align:center;">'
            + '<a name="okBtn" class="mini-button" style="width:60px;">确定</a>    '
            + '<a name="cancelBtn" class="mini-button" style="width:60px;margin-left:20px;">取消</a>    '
         + '</div>';
      jQuery(bodyEl).append(footerHtml);

      mini.parse(this.el);

      //组件对象
      this.okBtn = mini.getbyName("okBtn", this);
      this.cancelBtn = mini.getbyName("cancelBtn", this);
      this.searchBtn = mini.getbyName("searchBtn", this);
      this.keyText = mini.getbyName("keyText", this);
},
initEvents: function () {
      this.searchBtn.on("click", function (e) {
         var key = this.keyText.getValue();
         this.search(key);
      }, this);
      this.keyText.on("enter", function (e) {
         var key = this.keyText.getValue();
         this.search(key);
      }, this);

      /////////////////////////////////////
      this.okBtn.on("click", function (e) {
         var ret = true;
         if (this.callback) ret = this.callback('ok');
         if (ret !== false) {
            this.hide();
         }
      }, this);
      this.cancelBtn.on("click", function (e) {
         var ret = true;
         if (this.callback) ret = this.callback('cancel');
         if (ret !== false) {
            this.hide();
         }
      }, this);
      this.on("closableclick", function (e) {
         e.cancel = true;
         var ret = true;
         if (this.callback) ret = this.callback('close');
         if (ret !== false) {
            this.hide();
         }
      }, this);
},
setUrl: function (value) {
      this.url = value;
      this.grid.setUrl(value);
},
setKeyField: function (value) {
      this.keyField = value;
},
search: function (key) {
      var args = {};
      args[this.keyField] = key;
      this.grid.load(args);
},
setData: function (data, callback) {
      this.callback = callback;
},
getData: function () {
      var row = this.grid.getSelected();
      return row;
}
});

作者: fcrong 时间: 2012-3-6 10:31:52

不错。

作者: 969844859 时间: 2012-4-9 15:26:49

本帖最后由 969844859 于 2012-4-9 15:36 编辑

你好
   请问：

   ①、UsersWindow = function () {
            }

   ②、UsersWindow.superclass.constructor.call(this);

   ③、mini.extend();

   ④、search: function (key) {}

   这四个各是什么意思啊？

作者: 969844859 时间: 2012-4-9 15:27:38

fcrong 发表于 2012-3-6 10:31
不错。

弹出面板必须用 js写么？能否用html构建，然后显示弹出？

作者: xiwa 时间: 2012-4-9 15:51:13

想问下楼主，Gird编辑的时候ButtonEdit怎么显示值的？

作者: factory 时间: 2012-4-9 16:18:45

xiwa 发表于 2012-4-9 15:51
想问下楼主，Gird编辑的时候ButtonEdit怎么显示值的？

你可以通过ButtonEdit的setValue来设置值,通过setText来设置文本内容

作者: fcrong 时间: 2012-4-9 22:23:57

969844859 发表于 2012-4-9 15:27
弹出面板必须用 js写么？能否用html构建，然后显示弹出？

弹出面板可以用HTML来写，也可以用单独页面。
具体可以参考：
HTML实现方式：http://miniui.com/demo/#src=datagrid/popupeditform.html
子页面弹出方式：http://miniui.com/demo/#src=buttonedit/openpage.html

作者: 969844859 时间: 2012-4-10 10:47:05

fcrong 发表于 2012-4-9 22:23
弹出面板可以用HTML来写，也可以用单独页面。
具体可以参考：
HTML实现方式：http://miniui.com/demo/#sr ...

恩好的谢谢。

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