jQuery MiniUI

标题: 这个怎么用datagrid 绑定？ [打印本页]

作者: yanzhiyuan320 时间: 2012-10-24 11:20:39 标题: 这个怎么用datagrid 绑定？

本帖最后由 yanzhiyuan320 于 2012-10-24 11:22 编辑

	任务1		任务2		任务3
开始日期	2012/1/1		2012/1/1		2012/1/1
结束日期	2012/1/2		2012/1/6		2012/1/9
供应商名称	是否启用	状态	是否启用	状态	是否启用	状态
Sup1	Y
Sup2
Sup3
Sup4

上面多出的两行开始日期、结束日期这个怎么弄？
从供应商名称这个地方是可以绑定的。

作者: yanzhiyuan320 时间: 2012-10-24 11:39:08

[attach]812[/attach]

以上是原始的，后来需要改上面 Excel 中的形式

作者: factory 时间: 2012-10-24 12:30:25

yanzhiyuan320 发表于 2012-10-24 11:39
以上是原始的，后来需要改上面 Excel 中的形式

有点不太明白你的需求，能否说详细点

作者: yanzhiyuan320 时间: 2012-10-24 14:45:19

本帖最后由 yanzhiyuan320 于 2012-10-24 14:48 编辑

factory 发表于 2012-10-24 12:30
有点不太明白你的需求，能否说详细点

绑定的时候，是按照列名绑定的？但是上面的那个时间也是从后台交叉表读出来的，如果绑定的话，会变成这个样子
供应商名称                               任务1                                                                任务2
               开始日期       结束日期       是否提交       状态       开始日期       结束日期       是否提交       状态
Sup1       2012/1/1       2012/1/1       N                                  2012/1/1       2012/1/1       N
Sup2       2012/1/1       2012/1/1
Sup3       2012/1/1       2012/1/1
Sup4       2012/1/1       2012/1/1
Sup5       2012/1/1       2012/1/1
Sup6       2012/1/1       2012/1/1

应该可以看的懂吧

作者: niko 时间: 2012-10-24 16:51:48

你可以多生成一些列，或多生成一些行来做。
反正datagrid支持多表头和行、单元格。

作者: yanzhiyuan320 时间: 2012-10-24 17:28:49

niko 发表于 2012-10-24 16:51
你可以多生成一些列，或多生成一些行来做。
反正datagrid支持多表头和行、单元格。

列是不允许生成的，需求中，任务1中所有供应商的开始日期、结束日期都一致不符合需求，只需新增2行即可，今天尝试了
tmpStr.AppendFormat("<div header=\"{0}\" align=\"center\" headerAlign=\"center\"><input property=\"editor\" class=\"mini-combobox\" style=\"width:100%;\" data=\"IsEnable\"/><div property=\"columns\">", strSup);

这个时间是可以编辑的，我想编辑表头貌似不可以

作者: yanzhiyuan320 时间: 2012-10-24 17:31:42

本帖最后由 yanzhiyuan320 于 2012-10-24 22:18 编辑

[attach]818[/attach]niko 发表于 2012-10-24 16:51
你可以多生成一些列，或多生成一些行来做。
反正datagrid支持多表头和行、单元格。

今天还发现个奇怪的事情，我更新了10.23 号的内容结果，DataGrid 样式错了第一行有空白，最下面的分页也有问题

之前是好好的。

[attach]822[/attach]

作者: factory 时间: 2012-10-25 09:29:10

yanzhiyuan320 发表于 2012-10-24 17:31
今天还发现个奇怪的事情，我更新了10.23 号的内容结果，DataGrid 样式错了第一行有空白，最下面的分页 ...

你把你的样式出错的datagrid页面上传下，我们看下

作者: yanzhiyuan320 时间: 2012-10-25 13:40:37

factory 发表于 2012-10-25 09:29
你把你的样式出错的datagrid页面上传下，我们看下

<!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>

</title><link href="css/demo.css" rel="stylesheet" type="text/css" />
<script src="scripts/boot.js" type="text/javascript"></script>
<style type="text/css">
      .icon-ok, .icon-no
      {
         width: 16px;
         height: 16px;
         overflow: hidden;
         margin: auto;
         background: url(scripts/miniui/themes/icons/ok.png) no-repeat;
         text-align: center;
         display: block;
      }
      .icon-no
      {
         background: url(scripts/miniui/themes/icons/no.png) no-repeat;
      }
</style>
</head>
<body style="font-size: 12px;">
<h1>
      供应商任务启用/审核</h1>
<span id="sp_Data"><div style="width: 615px;"><div class="mini-toolbar" style="border-bottom: 0; padding: 0px;"><table style="width: 100%;"><tr><td style="width: 100%;"><a class="mini-button" iconcls="icon-save" onclick="saveData()" plain="true">保存</a></td></tr></table></div></div><div id="datagrid1" class="mini-datagrid" style="width: 615px; height: 280px;" allowresize="true" pagesize="20" allowcelledit="true" allowcellselect="true" url="data/AjaxServiceProj.aspx?method=GetTaskCrossSupData&proj_id=7a89b38c-7506-4a3e-bb8b-70f7c9aaf5dc&phase_id=405363a9-2c21-4fbf-a5e7-0cfec25da653&node_id=0a980a60-cfa8-4f62-b314-23e7225093b9" multiselect="true" allowcellvalid="true" oncellvalidation="onCellValidation" onload="onLoad"><div property="columns"><div type="checkcolumn"></div><div name="Sup_ID" field="Sup_ID" width="100" headeralign="center">名称</div><div header="工装(样品)认可证" align="center" headerAlign="center"><div property="columns"><div field="25e9c71c-659b-46de-9591-61ffcf43b205@工装(样品)认可证" vtype="required" width="80" renderer="onGenderRenderer" align="center" headerAlign="center">是否提交<input property="editor" class="mini-combobox" style="width:100%;" data="IsEnable"/></div><div field="25e9c71c-659b-46de-9591-61ffcf43b205" name="state" width="80" align="center" headerAlign="center">状态</div></div></div><div header="工装样件材料采购及交样需求表" align="center" headerAlign="center"><div property="columns"><div field="fea6c571-8ea5-45e8-a05b-9576291c5e9d@工装样件材料采购及交样需求表" vtype="required" width="80" renderer="onGenderRenderer" align="center" headerAlign="center">是否提交<input property="editor" class="mini-combobox" style="width:100%;" data="IsEnable"/></div><div field="fea6c571-8ea5-45e8-a05b-9576291c5e9d" name="state" width="80" align="center" headerAlign="center">状态</div></div></div><div header="样件签署" align="center" headerAlign="center"><div property="columns"><div field="1862a160-7583-49cd-bd44-e92982e7077f@样件签署" vtype="required" width="80" renderer="onGenderRenderer" align="center" headerAlign="center">是否提交<input property="editor" class="mini-combobox" style="width:100%;" data="IsEnable"/></div><div field="1862a160-7583-49cd-bd44-e92982e7077f" name="state" width="80" align="center" headerAlign="center">状态</div></div></div></div></div></span>
<script type="text/javascript">
      mini.parse();
      var grid = mini.get("datagrid1");
      if (grid != undefined) {
         grid.load();
      }

      var IsEnable = [{ id: 0, text: '启用' }, { id: 1, text: '禁用'}];
      function onGenderRenderer(e) {
         for (var i = 0, l = IsEnable.length; i < l; i++) {
            var g = IsEnable;
            if (g.id == e.value) return g.text;
         }
         return "";
      }

      function saveData() {
         var data = grid.getChanges();
         var json = mini.encode(data);

         grid.loading("保存中，请稍后......");
         $.ajax({
            url: "data/AjaxService.aspx?method=SaveTaskCrossSupData",
            data: { data: json },
            type: "post",
            success: function (text) {
                  grid.reload();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                  alert(jqXHR.responseText);
            }
         });
      }

      function onCellValidation(e) {
         if (e.field == "End_Date") {
            if (e.value == 0) {
                  e.isValid = false;
                  e.errorText = "不能为空";
            }
         }
      }
      if (grid != undefined) {
         grid.on("drawcell", function (e) {
            var record = e.record,
            column = e.column,
            field = e.field,
            value = e.value;

            if (column.name == "state") {
                  if (e.value == 0) {
                     e.cellHtml = ""
                  }
                  else if (e.value == 1) {
                     e.cellHtml = "<span class=\"icon-no\" onclick=\"edit('" + field + "')\"></span>"
                  }
                  else {
                     e.cellHtml = "<span class=\"icon-ok\" onclick=\"edit('" + field + "')\"></span>"
                  }
            }
         });
      }

      function edit(sup_id) {
         var row = grid.getSelected();
         if (row) {
            mini.open({
                  url: "PM_Proj_Task_Edit_Prod.html",
                  title: "供应商任务审核", width: 950, height: 450,
                  onload: function () {
                     var iframe = this.getIFrameEl();
                     var data = { action: "edit", sup_id: sup_id, id: row.id };
                     iframe.contentWindow.SetData(data);
                  },
                  ondestroy: function (action) {
                     grid.reload();
                  }
            });
         } else {
            alert("请选中一条记录");
         }
      }

      function onLoad(e) {
         var grid = e.sender;

         var marges = [
            { rowIndex: 0, columnIndex: 2, rowSpan: 1, colSpan: 2 }
         ];

         grid.margeCells(marges);
      }
</script>
</body>
</html>

作者: yanzhiyuan320 时间: 2012-10-25 13:42:07

yanzhiyuan320 发表于 2012-10-25 13:40
.icon-ok, .icon-no
      {
         width: 16px;

sp_Data  是后台动态输出的字符(因为不固定)
作者: factory 时间: 2012-10-25 14:16:10

yanzhiyuan320 发表于 2012-10-25 13:42
sp_Data  是后台动态输出的字符(因为不固定)

[attach]823[/attach]
这个是我用你给的界面，只是将datagrid的url 还有 field跟我本地的数据匹配起来之后，完全是正常的。
你重新下载更新下miniui呢，2.1.4版本应该是10月24日的

作者: yanzhiyuan320 时间: 2012-10-25 17:06:31

本帖最后由 yanzhiyuan320 于 2012-10-25 17:13 编辑

factory 发表于 2012-10-25 14:16
这个是我用你给的界面，只是将datagrid的url 还有 field跟我本地的数据匹配起来之后，完全是正常的。
你 ...

恩，现在好了，是这个个文件miniui.js  引起的，我下载的时候这个日期是上午，今天刚更新了变成下午17:59分

[attach]824[/attach]

作者: factory 时间: 2012-10-26 09:16:07

yanzhiyuan320 发表于 2012-10-25 17:06
恩，现在好了，是这个个文件miniui.js  引起的，我下载的时候这个日期是上午，今天刚更新了变成下午17:5 ...

什么意思？当表头header，能编辑不？
不明白你说的意思
作者: yanzhiyuan320 时间: 2012-10-26 12:20:02

factory 发表于 2012-10-26 09:16
什么意思？当表头header，能编辑不？
不明白你说的意思

应该是算解决了，就是datagrid 绑定的时候，第一、二两行的数据不属于绑定的列，现在用两个datagrid 帮了
[attach]834[/attach]

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