如何在jqGrid中实现自定义分组 [英] how to implement custom grouping in jqGrid

问题描述

我是jqGrid的入门者，我为实现分组编写了此代码

I'm starter in jqGrid, i write this code for Implement Grouping

$(function () {
            var mydata = [
                          { id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "12", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "13", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                          { id: "14", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "15", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "16", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                          { id: "17", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
                          { id: "18", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "19", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                          { id: "21", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "22", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "23", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
                          { id: "24", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "25", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "26", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                          { id: "27", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "28", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "29", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00"}];
            jQuery("#list48").jqGrid({
                data: mydata,
                datatype: "local",
                height: 'auto',
                rowNum: 30,
                rowList: [10, 20, 30],
                colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
                colModel: [
                    { name: 'id', index: 'id', width: 60, sorttype: "int" },
                    { name: 'invdate', index: 'invdate', width: 90, sorttype: "date", formatter: "date" },
                    { name: 'name', index: 'name', width: 100, editable: true },
                    { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float", formatter: "number", editable: true },
                    { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float", editable: true },
                    { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                    { name: 'note', index: 'note', width: 150, sortable: false}],
                pager: "#plist48",
                viewrecords: true,
                sortname: 'name',
                grouping: true,
                groupingView: { groupField: ['name'] },
                caption: "Grouping Array Data" });

        });

并创建此网格

我要设置动态分组.用户拖动标题列并在该网格后的顶部框中拖放该图片 请帮我实施这个Senaryo .谢谢大家

i want set Grouping Dynamicaly.Such that user Drag Header Column and Drop in top box after that grid Grop such this picture please help me for implement this senaryo . thanks all

推荐答案

在jqGrid端，您需要使用groupingRemove和groupingGroupBy方法来更改分组动态，您可以在

On the jqGrid side you need to use groupingRemove and groupingGroupBy methods to change grouping dynamic, you can read more about them in documentation.

对于UI部分，您应该查看以下交互:

For the UI part you should look at following interactions:

• 可拖动
• 可拖放
• 可分级

• Draggable
• Droppable
• Sortable

可植入中的购物车示例应该为您提供有关如何处理该主题的很好的概述.

The Shopping Cart sample in Droppable should give you a very good overview on how to approach the subject.

现在，在获得了所有理论信息之后，我为您在jsFiddle上创建了一个示例: jqGrid动态拖动-n-拖放分组.它需要一些样式以使其完全符合您的期望，但是它应该使您能够了解所有内部构造.如果您需要有关代码的注释，请告诉我-我以后可以添加它们.

Now after all that theoretical informations, I have created a sample on jsFiddle for you: jqGrid dynamic drag-n-drop grouping. It needs some styling to look exactly as what you are looking for, but it should allow you to understand all the internals. If you need some comments on the code let me know - I can add them later.

这篇关于如何在jqGrid中实现自定义分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！