kendoUI 免费部分开发部分经验。

kendo分多个版本，核心UI免费版.NET,JAVA,PHP对应的前后端开发版。

基础免费版开放的UI经多个测试，与收费封装的UI并无区别，收费版提供了后端代码和前端封装语法，使不懂JS前端的也可简易开发。

基础免费版与专业版的DEMO差距实在太大，基础版的DEMO只提供最基础的DEMO样例，比如listView的服务器端翻页，官网上的样例无一个涉及，通通都是前一次加载完全部数据前端翻页。

实际开发的话，后端的开发人员，不愿购买其各语言封装专业版，或想写纯JS，再或者需要深度定制拓展的，可以在收费的DEMO中得到应有的API信息。

从开发版的DEMO中看出前端生成的JS代码数据样例，再看后端提交，处理，返回的数据。便可以纯JS的方式操作和自定义拓展功能。

实际工作并不复杂

以下是个人工作中以这种思路实现的部分功能展示和代码。

KenDo UI ListView实现的聊天记录统计展示功能（还未作完）

    <script>

        function getdatestring(dt) {

            var s = dt.indexOf('(');

            var e = dt.indexOf(')');

            var strdate = dt.substring(s + 1, e);

            //return  strdate;

            return new Number(strdate);

        }

        //1000    创建未接入会话

        //1001    接入会话

        //1002    主动发起会话

        //1004    关闭会话

        //1005    抢接会话

        //2001    公众号收到消息

        //2002    客服发送消息

        //2003    客服收到消息

        function isUserSendInfo(ope) {

            if (ope == 2003 || ope == 2001) {

                return "in";

            }

            if (ope == 2002) return "out";

            return "";

        }

        function gethidden1(ope)

        {

            if (ope == 2003 || ope == 2001) return "none";

            else return "";

        }

        //当是客服发信息时

        function gethidden2(ope) {

            if (ope == 2002) return "none";

            else return "";

        }

    </script>

    <script type="text/x-kendo-template" id="template2">

        <li class="#:isUserSendInfo(opercode)#">

            <div class="message">

                <span class="arrow"></span>

                <a class="name" style="display: #:gethidden2(opercode)#; ">#:nickname#</a>

                <span class="datetime">#:kendo.toString(new Date(getdatestring(date)),"yyyy-MM-dd")# #:kendo.toString(new Date(time),"HH:mm")#</span>

                <a class="name" style="display:#:gethidden1(opercode)#; ">#:worker#</a>

                <span class="body">#:text#</span>

            </div>

        </li>

    </script>

    <div class="demo-section">

        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 600px;">

            <div id="listView" class="scroller" data-height="600px" data-always-visible="1" data-rail-visible1="1" style="overflow: hidden; width: auto; height: 600px;">

                <ul class="chats" id="ullist">

                </ul>

</div>

        </div>

            <div id="pager" class="k-pager-wrap"></div>

        </div>

    <script>

        $(function() {

            var dataSource = new kendo.data.DataSource({

                "transport":

                {

                    "prefix": "",

                    "read": { "url": "/Admin/MpCustomerService/MpCustomerServiceConfig_Read_List?mpaccountid=112" }

                },

                "pageSize": 10,

                "page": 1,

                "total": 0,

                "serverPaging": true,

                //"serverSorting": true,

                //"serverFiltering": true,

                //"serverGrouping": true,

                //"serverAggregates": true,

                "type": "aspnetmvc-ajax",

                "filter": [],

                "schema": {

                    "data": "Data",

                    "total": "Total",

                    "errors": "Errors",

                }

            });

            $("#pager").kendoPager({

                dataSource: dataSource

            });

            $("#ullist").kendoListView({

                dataSource: dataSource,

                template: kendo.template($("#template2").html())

            });

        });

    </script>

从收费版支持较好的前后端DEMO中获知API信息，再用于免费版的应用开发。

巴特西

kendoUI 免费部分开发部分经验。

最新文章

热门文章