高效表格工具套件flyingGrid2

高效表格工具套件flyingGrid2_第1张图片

flyingGrid2让表格归于简单! 

下载地址

开源中国

基本介绍 

flyingGrid2是一款前所未有的轻量级高效的表格工具套件,目前支持C#和Java 

版权声明 

作者知鸣,您可以在遵循BSD协议下使用! 

主要特点

 高效表格工具套件flyingGrid2_第2张图片

界面效果 

高效表格工具套件flyingGrid2_第3张图片

生成代码

 高效表格工具套件flyingGrid2_第4张图片

源码结构 

支持Java,PHP版本FlyingGrid2期待合作后续推出! 

高效表格工具套件flyingGrid2_第5张图片

 

服务端flyingGrid2.xml配置

 高效表格工具套件flyingGrid2_第6张图片

客户端javascript API

高效表格工具套件flyingGrid2_第7张图片

 服务端.net(C#) API

高效表格工具套件flyingGrid2_第8张图片

 Demo

1)通过异步请求方式 

服务端代码 

 

 public ActionResult AjaxCtrl(int pageNumber)
        {
            //数据源
            List<fyUserInfo> uinfo = new List<fyUserInfo>();
            for (int i = 0; i < 1000; i++)
            {
                fyUserInfo useTemp = new fyUserInfo();
                useTemp.UserId = i;
                useTemp.UserName = "weichengdong";
                useTemp.Age = i+15;
                useTemp.School = "武汉" + i.ToString();
                useTemp.No = 100000 + i;
                uinfo.Add(useTemp);
            }
            //模拟分页
            FlyingGrid2 fg2 = new FlyingGrid2("Fly2Test");
            List<fyUserInfo> pageData = uinfo.GetRange((pageNumber - 1) * fg2.PageSize, fg2.PageSize);
          
            string result = fg2.LoadGrid(pageData, pageNumber, 1000);
            return Content(result);
        }

 

客户端代码

<html>
<head>
    <script src="http://www.cnblogs.com/FlyingGrid2/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/FlyingGrid2/Scripts/flyingGrid2.js" type="text/javascript"></script>
    <link href="http://www.cnblogs.com/FlyingGrid2/Css/flyingGrid2.css" rel="stylesheet" type="text/css" />
    <title>通过ajax方式请求</title>
</head>
<body>
    <input type="button" id="getGrid" value="点击获取表格" />
    <div id="testGrid" grid="Fly2Test" class="flyingGrid">表格将显示在这里...</div>
</body>
<script type="text/javascript">
    $("document").ready(function () {
        $("#testGrid").flyingGrid2({
            url: "AjaxCtrl"
        });
        $("#getGrid").click(function () {
            $("#testGrid").LoadGrid();
        });
    })
</script>
</html>

     2)通过页面直接绑定的方式 

服务端代码 

 

public ActionResult FlyingGridDev()
        {
            //数据源
            List<fyUserInfo> uinfo = new List<fyUserInfo>();
            for (int i = 0; i < 1000; i++)
            {
                fyUserInfo useTemp = new fyUserInfo();
                useTemp.UserId = i;
                useTemp.UserName = "weichengdong";
                useTemp.Age = i + 15;
                useTemp.School = "武汉" + i.ToString();
                useTemp.No = 100000 + i;
                uinfo.Add(useTemp);
            }

            FlyingGrid2 fg2 = new FlyingGrid2("Fly2Test");
            List<fyUserInfo> pageData = uinfo.GetRange(0, fg2.PageSize);         
            string result = fg2.LoadGrid(pageData,1,1000);

            ViewBag.table = result;
            return View();
        }

 

客户端代码 

 

<html>
<head>
    <title>flyingGrid使用示例</title>
    <script src="http://www.cnblogs.com/FlyingGrid2/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/FlyingGrid2/Scripts/flyingGrid2.js" type="text/javascript"></script>
    <link href="http://www.cnblogs.com/FlyingGrid2/Css/flyingGrid2.css" rel="stylesheet" type="text/css" />
</head>
    <body>
     <div id="testGrid" grid="Fly2Test" class="flyingGrid">@Html.Raw(ViewBag.table) </div>
    </body>
         <script type="text/javascript">
             $("document").ready(function () {


                 $("#testGrid").flyingGrid2({
                         url: "AjaxCtrl"                       
                     });                
             })
        </script>
</html>

 

关于该套件的使用,提供了完整的源码和示例! 

BUG

如果使用中出现bug请将bug提交至[email protected]  

你可能感兴趣的:(grid)