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信息，再用於免費版的應用開發。