设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › MiniUI › 技术交流 › 这个怎么用datagrid 绑定？
12下一页
返回列表 发新帖
查看: 8539|回复: 13
打印 上一主题 下一主题

这个怎么用datagrid 绑定？ [复制链接]

yanzhiyuan320

Rank: 2
跳转到指定楼层
楼主
发表于 2012-10-24 11:20:39 |只看该作者 |倒序浏览
本帖最后由 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

Rank: 2
沙发
发表于 2012-10-24 11:39:08 |只看该作者


以上是原始的，后来需要改上面 Excel 中的形式
附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

factory

Rank: 8Rank: 8
板凳
发表于 2012-10-24 12:30:25 |只看该作者
yanzhiyuan320 发表于 2012-10-24 11:39
以上是原始的，后来需要改上面 Excel 中的形式

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

举报

yanzhiyuan320

Rank: 2
地板
发表于 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

Rank: 9Rank: 9Rank: 9
5#
发表于 2012-10-24 16:51:48 |只看该作者
你可以多生成一些列，或多生成一些行来做。
反正datagrid支持多表头和行、单元格。

举报

yanzhiyuan320

Rank: 2
6#
发表于 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

Rank: 2
7#
发表于 2012-10-24 17:31:42 |只看该作者
本帖最后由 yanzhiyuan320 于 2012-10-24 22:18 编辑
niko 发表于 2012-10-24 16:51
你可以多生成一些列，或多生成一些行来做。
反正datagrid支持多表头和行、单元格。


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

之前是好好的。



附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

factory

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

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

举报

yanzhiyuan320

Rank: 2
9#
发表于 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

Rank: 2
10#
发表于 2012-10-25 13:42:07 |只看该作者
yanzhiyuan320 发表于 2012-10-25 13:40
.icon-ok, .icon-no
        {
            width: 16px;

sp_Data  是后台动态输出的字符(因为不固定)

举报

12下一页
返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-11-26 23:50 , Processed in 1.039249 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部