jQuery MiniUI

标题: 可以动态生成列,然后根据动态生成的数据,合并单元格嘛 [打印本页]

作者: 奋斗小男人    时间: 2020-11-2 17:38:04     标题: 可以动态生成列,然后根据动态生成的数据,合并单元格嘛

有一个业务需求,根据查询条件分组,分组后数据库查询出来的数据,有相同的列,需要和并,有多个表头。像这样:查询条件选择用水性质,之后数据库查询返回字段,前端生成这样的页面。

[attach]13018[/attach]


作者: felt    时间: 2020-11-3 09:05:31

可以的,
可以自定义合并单元格
http://www.miniui.com/demo/#src=datagrid/mergecells.html
作者: 奋斗小男人    时间: 2020-11-3 16:02:35

felt 发表于 2020-11-3 09:05
可以的,
可以自定义合并单元格
http://www.miniui.com/demo/#src=datagrid/mergecells.html ...

好的 我试试看
作者: 奋斗小男人    时间: 2020-11-4 10:27:38

felt 发表于 2020-11-3 09:05
可以的,
可以自定义合并单元格
http://www.miniui.com/demo/#src=datagrid/mergecells.html ...

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

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

            grid.mergeCells(marges);
        }
这一段代码,能写出自动合并相同的列嘛
作者: 奋斗小男人    时间: 2020-11-4 10:29:02

奋斗小男人 发表于 2020-11-4 10:27
function onLoad(e) {
            var grid = e.sender;

<body>
    <button onclick="mergeCells()">合并</button>
    <div class="mini-datagrid" style="width:400px;height:300px" id="datagrid1">
        <div property="columns">
            <div field="a" name="c1">A</div>
            <div field="a" displayField="b" name="c2">B</div>
            <div field="c">C</div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/miniui.js"></script>
<script type="text/javascript">
    var data = [{
        a: 1,
        b: 3
    }, {
        a: 1,
        b: 3
    }, {
        a: 1,
        b: 3
    }, {
        a: 2,
        b: 3
    }, {
        a: 2,
        b: 3
    }, {
        a: 2,
        b: 3
    }, {
        a: 3,
        b: 3
    }, {
        a: 3,
        b: 3
    }, {
        a: 3,
        b: 3
    }]
    mini.parse();
    var grid = mini.get("datagrid1");
    grid.setData(data);

    function mergeCells() {
        grid.mergeColumns(["c1", "c2"]);
    }
</script>
和您之前的那个一样,加载的时候就自动合并好。




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