使用FlexiGrid实现Extjs表格效果方法分享(6)


 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Complex-8.aspx.cs" Inherits="GridDemo.Complex_8" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
 <html xmlns="">
 <head runat="server">
     <title></title>
     <link type="text/css" href="https://www.jb51.net/css/flexigrid/flexigrid.css" />
     <script type="text/javascript" src="https://www.jb51.net/lib/jquery/jquery.js"></script>
     <script type="text/javascript" src="https://www.jb51.net/flexigrid.js"></script>
     <link type="text/css" href="https://www.jb51.net/facebox/facebox.css" />
     <link type="text/css" href="https://www.jb51.net/body.css" />
     <script type="text/javascript" src="https://www.jb51.net/facebox/facebox.js"></script>
     <script type="text/javascript">
         $("document").ready(function() {
             $("#flex1").flexigrid
             ({
                 url: 'GetDataSource4.ashx',
                 dataType: 'json',
                 colModel: [
                 { display: '地址ID', name: 'AddressID', width: 40, sortable: true, align: 'center' },
                 { display: '具体地址1', name: 'AddressLine1', width: 140, sortable: true, align: 'left' },
                 { display: '具体地址2', name: 'AddressLine2', width: 80, sortable: true, align: 'left' },
                 { display: '邮编', name: 'PostalCode', width: 80, sortable: true, align: 'left' },
                 { display: '城市', name: 'City', width: 80, sortable: true, align: 'left' },
                 { display: '操作', name: 'Opt', width: 80, sortable: true, align: 'left' }
                 ],
                 buttons: [
                 { name: 'A', onpress: sortAlpha },
                 { name: 'B', onpress: sortAlpha },
                 { name: 'C', onpress: sortAlpha },
                 { name: 'D', onpress: sortAlpha },
                 { name: 'E', onpress: sortAlpha },
                 { name: 'F', onpress: sortAlpha },
                 { name: 'G', onpress: sortAlpha },
                 { name: 'H', onpress: sortAlpha },
                 { name: 'I', onpress: sortAlpha },
                 { name: 'J', onpress: sortAlpha },
                 { name: 'K', onpress: sortAlpha },
                 { name: 'L', onpress: sortAlpha },
                 { name: 'M', onpress: sortAlpha },
                 { name: 'N', onpress: sortAlpha },
                 { name: 'O', onpress: sortAlpha },
                 { name: 'P', onpress: sortAlpha },
                 { name: 'Q', onpress: sortAlpha },
                 { name: 'R', onpress: sortAlpha },
                 { name: 'S', onpress: sortAlpha },
                 { name: 'T', onpress: sortAlpha },
                 { name: 'U', onpress: sortAlpha },
                 { name: 'V', onpress: sortAlpha },
                 { name: 'W', onpress: sortAlpha },
                 { name: 'X', onpress: sortAlpha },
                 { name: 'Y', onpress: sortAlpha },
                 { name: 'Z', onpress: sortAlpha },
                 { name: '%', onpress: sortAlpha }
                 ],
                 searchitems: [
                  { display: '城市', name: 'City' , isdefault: true},
                  { display: '邮编', name: 'PostalCode' }
                  ],
                 usepager: true,
                 title: '客户信息',
                 useRp: true,
                 rp: 10,
                 showTableToggleBtn: true,
                 width: 700,
                 height: 200,
                 rpOptions: [10, 15, 20, 25, 40, 60], //可选择设定的每页结果数
                 procmsg: '请等待数据正在加载中 …', //正在处理的提示信息
                 resizable: false, //是否可伸缩
                 sortname: "AddressID",
                 //sortorder: "asc",//此列由于存储过程原因无法用
             });
         });
         function sortAlpha(com) {
             jQuery('#flex1').flexOptions({ newp: 1, params: [{ name: 'letter_pressed', value: com }, { name: 'qtype', value: $('select[name=qtype]').val()}] });
             jQuery("#flex1").flexReload();
         }
         function sss(data)
         {
            var temp=eval(data);
 //           jQuery.facebox(temp);
            jQuery.facebox({ ajax: 'Default.aspx?id='+temp })
         }
     </script>
 </head>
 <body>
     <table>
     </table>
 </body>
 </html>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxxxs.html