JQGrid ToolBar的扩展-- 参考自EasyUI

分享到:
  来源:急速科技  发布时间:2013-07-18  浏览次数:10090

  Jquery EasyUI JQGrid

直接上代码:
<!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>
    <script type="text/javascript" src="/themes/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://www.fast818.com/jqGrid/themes/blue/jquery-ui.custom.min.css" />
    <link rel="stylesheet" type="text/css" href="http://www.fast818.com/JQGrid/css/ui.jqgrid.css" />
    <script src="../jqGrid/i18n/grid.locale-cn.js" type ="text/javascript"></ script>
    <script language="javascript" type="text/javascript" src="/JQGrid/jquery.jqGrid.src.js"></script>
    <script src="/js/public.js" type="text/javascript"></script>
</head>
<body>
<!--工具栏 div形式-->
 <div id="toolbar_26">
        <form method="get" action="Common/StatGrid.aspx?type=OA.Model.DealItem&mid=26" id="formwinStat26">
        开始时间:
        <input type="text" class="easyui-datebox" required="true" name="start" />
        结束时间:
        <input type="text" class="easyui-datebox" required="true" name="end" /><input type="hidden"
            name="type" value="OA.Model.DealItem" />
        客户账号:
        <input type="text" class="easyui-numberbox" name="account" data-options="required:false" />
        经纪人:
        <input type="text" name="saler" data-options="required:false" />
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="$('#formwinStat26').submit();">
            查询 </a>
        </form>
     
    </div>
    <table id="list4">
    </table>
    <script type="text/javascript">
<!--工具栏 数组形式-->
        var tool = [{ text: ' 查看 ' , iconCls: 'icon-read', handler: function () {
            oa.single(type, $( '#grid_TradeMonth').datagrid('getSelected' ),
        mid);
        }
        }, '-', { text: ' 添加 ' , iconCls: 'icon-add', handler: function () {
            oa.add( 'winTradeMonth');
        }
        }, '-', { text: ' 修改 ' , iconCls: 'icon-edit', handler: function () {
            oa.edit(type,
        $( '#grid_TradeMonth').datagrid('getSelected' ), 'formwinTradeMonth');
        }
        }, '-', {
            text: ' 查询 ', iconCls: 'icon-search' , handler: function () {
                oa.query(type, grid);
            }
        }, '-', { text: ' 导入数据 ' , iconCls: 'icon-redo', handler: function () {
            oa.impData( 'importwinTradeMonth');
        }
        }, '-', { text: ' 批量删除 ' , iconCls: 'icon-set', handler: function () {
            oa.batDel(type,
        grid, mid);
        }
        }]
        jQuery( "#list4").jqGrid({
            datatype: "local",width:1000,
            height: 250, toolbar: [ true, "top" , tool], // toolbar: [ true, "top" ,"#toolbar_26"],
            colNames: [ '角色ID', 'Date' , 'Client', 'Amount', 'Tax' , 'Total', 'Notes'],
            colModel: [
                                { name: 'Role.id', index: 'Role.id' , width: 60, sorttype: "int" },
                                { name: 'invdate', index: 'invdate' , width: 90, sorttype: "date" },
                                { name: "Role.name", index: "Role.name" , width: 100 },
                                { name: 'amount', index: 'amount' , width: 80, align: "right", sorttype: "float" },
                                { name: 'tax', index: 'tax' , width: 80, align: "right", sorttype: "float" },
                                { name: 'total', index: 'total' , width: 80, align: "right", sorttype: "float" },
                                { name: 'note', index: 'note' , width: 150, sortable: false }
                ],
            multiselect: true, caption: "Manipulating Array Data"
        });
        var mydata = [
                                { "Role.id": "1" , invdate: "2007-10-01", "Role.name": "test" , note: "note", amount: "200.00", tax: "10.00" , total: "210.00" },
                                { "Role.id": "2" , invdate: "2007-10-02", "Role.name": "test2" , note: "note2", amount: "300.00", tax: "20.00" , total: "320.00" },
                                { "Role.id": "3" , invdate: "2007-09-01", "Role.name": "test3" , note: "note3", amount: "400.00", tax: "30.00" , total: "430.00" },
                                { "Role.id": "4" , invdate: "2007-10-04", "Role.name": "test" , note: "note", amount: "200.00", tax: "10.00" , total: "210.00" },
                                { "Role.id": "5" , invdate: "2007-10-05", "Role.name": "test2" , note: "note2", amount: "300.00", tax: "20.00" , total: "320.00" },
                                { "Role.id": "6" , invdate: "2007-09-06", "Role.name": "test3" , note: "note3", amount: "400.00", tax: "30.00" , total: "430.00" },
                                { "Role.id": "7" , invdate: "2007-10-04", "Role.name": "test" , note: "note", amount: "200.00", tax: "10.00" , total: "210.00" },
                                { "Role.id": "8" , invdate: "2007-10-03", "Role.name": "test2" , note: "note2", amount: "300.00", tax: "20.00" , total: "320.00" },
                                { "Role.id": "9" , invdate: "2007-09-01", "Role.name": "test3" , note: "note3", amount: "400.00", tax: "30.00" , total: "430.00" }
                                ];
        for (var i = 0; i <= mydata.length; i++)
            jQuery( "#list4").jqGrid('addRowData' , i + 1, mydata[i]);
    </script>
  
     
</body>
</html>
JQGrid源码中新增代码:
if (ts.p.toolbar[2]) {
                    var toolbar = ts.p.toolbar[2];
                    if (typeof toolbar == "string") {
                        $(toolbar).addClass( "dialog-toolbar").prependTo($(grid.uDiv)); $(toolbar).show();
                    } else {
                        //$(tb).find("div.dialog-toolbar").remove();//var _1fa = $("<div></div>").prependTo($(grid.uDiv));
                        for (var i = 0; i < toolbar.length; i++) {
                            var p = toolbar[i];
                            if (p == "-" ) {
                                $(grid.uDiv).append( "<div class=\"dialog-tool-separator\"></div>" );
                            } else {
                                var tool = $("<a href=\"javascript:void(0)\" class='fm-button ui-state-default ui-corner-all ui-reset fm-button-icon-left'>" + p.text + "</a>").appendTo($(grid.uDiv));
                                tool[0].onclick = eval(p.handler || function () { }); tool.css("float" , "left");
                                //tool.linkbutton($.extend({}, p, { plain: true }));tool.append("<div class='" + p.iconCls + "'>" + p.text + "</div>"); tool.append(p.text);  --这里需要EasyUI框架和样式的支持
                            }
                        }
                        $(grid.uDiv).append( "<div style=\"clear:both\"></div>" );
                    }
                }
  添加以上代码就能实现Easyui中一样的功能,至于按钮样式需要自己扩展,或者直接使用JqueryUI和Easyui中的样式

 

 

知识文章分类

Jquery

阅读排行