【玩转工具系列】玩转 linq.js

今天无聊的我在网上找到了这篇文章查询json数据结构的8种方式，大家可以点击进去看一下,虽然说这篇文章的更新时间已经很久了，但确实很有效的解决了我现实中遇到的问题。

其他的我就不介绍了，这篇文章主要介绍的是 linqjs ,下面我们就看一下实例：

首先我们自然是先要下载 linq.js了，下载链接为 :http://linqjs.codeplex.com/

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LinqJs Demo</title>
    <!-- 引入 bootstrap 样式 CDN -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.1.0/css/bootstrap.min.css">
</head>
<body>
    <!--引入 我们今天的主角 -->
    <script type="text/javascript" src="js/linq.min.js"></script>
    <script type="text/javascript">
        //创建一组json数据
        var people = [
            { Id:1,Name:"张三",Age:18,Sex:"男"},
            { Id:2,Name:"李四",Age:35,Sex:"女"},
            { Id:3,Name:"王五",Age:45,Sex:"男"},
            { Id:4,Name:"赵六",Age:19,Sex:"男"},
            { Id:5,Name:"孙七",Age:20,Sex:"女"},
            { Id:6,Name:"赵四",Age:55,Sex:"女"},
            { Id:7,Name:"刘能",Age:58,Sex:"男"},
            { Id:8,Name:"王二丫",Age:25,Sex:"女"},
            { Id:9,Name:"嘻嘻哈",Age:36,Sex:"男"},
            { Id:10,Name:"嘿嘿",Age:16,Sex:"女"}
        ];
    </script>
</body>
</html>

1.使用 linq.js 遍历 json

<!DOCTYPE html>// value 代表 json中 object 对象  index 表示 json中 object 对象下标            Enumerable.From(people).ForEach(function (value,index) {                peopleHtml += "<tr>";                peopleHtml += "<td>" + parseInt(index + 1) + "</td>";                peopleHtml += "<td>" + value.Name + "</td>";                peopleHtml += "<td>" + value.Age + "</td>";                peopleHtml += "<td>" + value.Sex + "</td>";                peopleHtml += "</tr>";            });

运行结果:

【玩转工具系列】玩转 linq.js :

2.使用 linq.js 实现分页

    var peopleHtml = "";            var peopleList = Enumerable.From(people)                    .Take(pageSize * curPage)                    .Skip(pageSize * (curPage - 1))                    .ToArray(); //必须将返回的类型转为 Array 否则 返回的数据类型为 linq.js自定义的 Enumerable 类型 这点不要忘了            // value 代表 json中 object 对象  index 表示 json中 object 对象下标            Enumerable.From(peopleList).ForEach(function (value,index) {                peopleHtml += "<tr>";                peopleHtml += "<td>" + parseInt(index + 1) + "</td>";                peopleHtml += "<td>" + value.Name + "</td>";                peopleHtml += "<td>" + value.Age + "</td>";                peopleHtml += "<td>" + value.Sex + "</td>";                peopleHtml += "</tr>";            });            $("peopleData").innerHTML = peopleHtml;            $("pagination").innerHTML = setPage(curPage);        }        var setPage = function (curPage) {            //根据数据总数 和  每页显示总数 计算处 分页的总数            const pages = Math.floor(people.length / pageSize) == 0 ? 1 :  Math.floor(people.length / pageSize);            //上一页 取绝对值            const previousPage = Math.abs(curPage - 1);            //下一页            const nextPage = parseInt(curPage + 1);            var pageHtml = "";            pageHtml += previousPage <= 0 ? "<li class=\"disabled\"><span>«</span></li>"  : "<li><a href='javascript:getPeople(" + previousPage + ")'>«</a></li>";            for(var i = 0; i < pages ; i++){                var pageIndex = parseInt( i + 1 );                if(pageIndex == curPage){                    pageHtml += "<li class=\"active\"><span>"+  pageIndex +"</span></li>";                }else{                    pageHtml += "<li><a href='javascript:getPeople(" + pageIndex + ")'>"+  pageIndex +"</a></li>";                }            }            pageHtml += nextPage > pages ? "<li class=\"disabled\"><span>»</span></li>"  : "<li><a href='javascript:getPeople(" + nextPage + ")'>»</a></li>";            return pageHtml;        }

运行结果:

【玩转工具系列】玩转 linq.js

3.使用 linq.js 实现查询

    var search = function () {            var searchContent = $("searchContent").value;            var peopleArray = people;            if(searchContent != ""){                peopleArray =  Enumerable.From(peopleArray).Where("$.Name == '" + searchContent + "'").ToArray();            }            getPeople(1,peopleArray);        }

运行结果:

【玩转工具系列】玩转 linq.js

linq.js大体就讲解这 3 点，其他的方法可以参阅 linq.js 的下载地址中，有明确的实例。如果你对于 C# 的 Linq 足够了解的话，相信 linq.js 对你来说也一定很容易。

最后文章中所涉及的实例源码下载地址:http://download.csdn.net/detail/hvkcoder/9692797，源码地址：https://github.com/SilenceHVK/LinqJs

秒客网

【玩转工具系列】玩转 linq.js

相关文章