jQuery MiniUI

标题: 如何让checkbox 某几行disable [打印本页]

作者: bieyehuaq1 时间: 2012-11-5 15:52:54 标题: 如何让checkbox 某几行disable

问题1：控件列表---表格控件---DataGrid，表格中，怎么把其中的几行成为不可选中状态？

问题2：单元格验证，里面通过js 赋值后，判断说不能为空，例子在 textboxl.html 里面。把里面清空，然后setvalue。之后后面会报红。怎么处理？

谢谢管理员，谢谢斑竹。miniui 很好用，页面比较漂亮。不过刚开始用，好多不熟悉。

作者: factory 时间: 2012-11-5 17:24:07

1.你可以监听表格的onrowclick事件,判断如果满足条件,就取消选中.
比如第二条数据不给选中

function rowclick(e){
if(e.row._index == "1"){
grid.deselect(e.record);
}
}

复制代码

2.建议你把出问题的页面上传下,我给你看下,不然问题不好重现.无法解决

作者: bieyehuaq1 时间: 2012-11-5 17:44:44

factory 发表于 2012-11-5 17:24
1.你可以监听表格的onrowclick事件,判断如果满足条件,就取消选中.
比如第二条数据不给选中2.建议你把出问题 ...

1,textboxlist.html  文件内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>TextBoxList</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link href="../demo.css" rel="stylesheet" type="text/css" />

  <script src="../../scripts/boot.js" type="text/javascript"></script>

</head>
<body>
  <input id="tbl1" class="mini-textboxlist" name="tbl"
textName="tblName" required="true" style="width: 250px;" readonly="true"
url="../data/AjaxService.jsp?method=FilterCountrys" value=""
text="" valueField="id" textField="text" />
  <br />
  <br />
  <input type="button" value="设置返回" />
  <script type="text/javascript">

   mini.parse();
      function add() {
      var btnEdit = mini.get("tbl1");
         mini.open({
   url: bootPATH + "../demo/datagrid/grouping.html",
         //  url: bootPATH + "../demo/datagrid/group.jsp?tt=3333",
            title: "新增员工", width: 600, height: 360,



            onload: function () {
            var textvalue =  btnEdit.value;
               var iframe = this.getIFrameEl();
               var data = { action: "new",id:textvalue};
               iframe.contentWindow.SetData(data);
            },

            ondestroy: function (action) {
                  if (action == "ok") {
                     var iframe = this.getIFrameEl();
                     var checkcode = mini.get("tbl1").value;

                     var data = iframe.contentWindow.GetData();
                     if(data!=null || data!=""){

                     data = mini.clone(data);
                  var btnEditValue =  btnEdit.value;
                  var btnEditText =  btnEdit.text;


                  if(btnEditValue==null||btnEditValue==""){
                  btnEdit.setValue(data.id);
                  }else{
                     btnEdit.setValue(data.id+","+btnEditValue);
                     }

                     if(btnEditText==null||btnEditText==""){
                  btnEdit.setText(data.text);
                  }else{
                     btnEdit.setText(data.text+","+btnEditText);
                     }
                  }
            }
            }
         });
      }


//       mini.parse();
//       var t = mini.get("tbl1");
//       t.on("valuechanged", onValueChanged);
      function onValueChanged(e) {
         alert(this.getValue() + "\n" + this.getText());
      }
</script>
</body>
</html>

grouping 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grouping 分组表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

<script src="../../scripts/boot.js" type="text/javascript"></script>


</head>
<body >
<form id="form1" method="post">
<h1>Grouping 分组表格</h1>
   <div class="mini-toolbar" style="text-align:center;padding-top:8px;padding-bottom:8px;" borderStyle="border:0;">
      <a class="mini-button" style="width:60px;">确定</a>
      <span style="display:inline-block;width:25px;"></span>
      <a class="mini-button" style="width:60px;">取消</a>
</div>
<div style="padding-bottom:5px;">

      <span>员工姓名：</span><input type="text" id="key"  />
      <input type="button" value="查找"/>
      <input type="hidden" name="A1" id="A1" >

</div>
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
url="../../demo/data/AjaxService.jsp?method=SearchEmployees&name=6666666"  idField="id" allowResize="true"
   showFooter="false" pageSize="20"  pager="#pager1"
   multiSelect="true"
>
<div property="columns">

   <div type="checkcolumn"  field="id" readonle="true"></div>
      <div field="loginname"  width="120" headerAlign="center" allowSort="true">员工帐号</div>
      <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
      <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
      <div field="salary" width="100" allowSort="true">薪资</div>
      <div field="dept_name" width="100" allowSort="true"  renderer="onDeptName" >部门</div>
      <div field="age" width="100" allowSort="true">年龄</div>
      <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>

</div>
</div>

<script type="text/javascript">


      mini.parse();
      var myDate1 = new Date();
      // 用户获取父页面传递过来的参数的值；
      function SetData(data) {
grid.load();
//  将此值放在隐藏文本域中，方便别的function 的方法调用。
$("#A1").val(data.id);
      }
      var grid = mini.get("datagrid1");
      grid.groupBy("dept_name", "asc");
      grid.setCollapseGroupOnLoad(true);

      function onDrawGroup(e) {
      e.cellHtml= e.value;
      var myDate2 = new Date();
      // runtime  用户获取从开始执行到执行到此处的时间，让其指定时间后执行。
      var runtime =  myDate2-myDate1;
      setTimeout('aaa()', runtime )
      }

  //指定时间后执行的方法，避免执行顺序的影响

  function aaa(){
  var vv = document.getElementById("A1").value;
var rows = grid.getData();
      for (var i = 0, l = rows.length; i < l; i++) {
         var row = rows;
         if(vv.indexOf(row.id)>-1){
//问题是：上面的判断如果包含这个row.id，就让对应行的那个checkbox成为不可选状态或者让它隐藏。最好两种方式都告诉哈，客户的需求随时在变的，你懂的，谢谢啦。。。。
         grid.removeRow(row);  // 这个怎么改？
         }
  }
}

      //对"createtime"字段，进行降级排序
      grid.sortBy("createtime", "desc");
      function search() {
         var key = document.getElementById("key").value;
         myDate1 = new Date();
         grid.load({ key: key });
      }
      $("#key").bind("keydown", function (e) {
         if (e.keyCode == 13) {
            search();
         }
      });

      
      function GetSelecteds() {
      var rows = grid.getSelecteds();
      return rows;
   }
function GetData() {
      var rows = grid.getSelecteds();
  var ids = [], texts = [];
      for (var i = 0, l = rows.length; i < l; i++) {
         var row = rows;
         ids.push(row.id);
         texts.push(row.name);
      }
      var data = {};
      data.id = ids.join(",");
      data.text = texts.join(",");
      alert(data.id);
      return data;
}

      function CloseWindow(action) {
if (window.CloseOwnerWindow)
      return window.CloseOwnerWindow(action);
      else
      window.close();
}


function onOk() {
// 获取被选中的行数，如果为0，就不进行后面的操作；
var rows = grid.getSelecteds();
if(rows.length==0){
   return;
}else{
      CloseWindow("ok");
}}
function onCancel() {
      CloseWindow("cancel");
}

   
</script>


</form>
</body>
</html>

作者: factory 时间: 2012-11-6 10:30:24

bieyehuaq1 发表于 2012-11-5 17:44
1,textboxlist.html  文件内容

设置不选中,checkbox禁用和隐藏,这个功能暂时还不提供,下面版本会考虑提供。

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2