Cordys HTML5 SDK BootStrap

来源：互联网发布：购买域名和空间编辑：程序博客网时间：2024/06/06 18:04

如下例子  BootStrap的分页技术，需先了解，如下例子：

<head>    <title>custom-ajax</title>    <meta charset="utf-8">    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">    <link rel="stylesheet" href="../assets/examples.css">    <script src="../assets/jquery.min.js"></script>    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>    <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>    <script src="../ga.js"></script></head><body>    <div class="container">        <h1>Custom Ajax</h1>        <p>Use <code>ajax</code> option: A method to replace ajax call. Should implement the same API as jQuery ajax method.</p>        <table id="table"               data-toggle="table"               data-height="460"               data-ajax="ajaxRequest"               data-search="true"               data-side-pagination="server"               data-pagination="true">            <thead>            <tr>                <th data-field="id">ID</th>                <th data-field="name">Item Name</th>                <th data-field="price">Item Price</th>            </tr>            </thead>        </table>    </div><script>    var $table = $('#table');    // custom your ajax request here    function ajaxRequest(params) {        // data you need        console.log(params.data);        // just use setTimeout        setTimeout(function () {            params.success({                total: 100,                rows: [{                    "id": 0,                    "name": "Item 0",                    "price": "$0"                }]            });            // hide loading            params.complete();        }, 1000);    }</script></body></html>

Cordys 的HTML5 SDK已经封装好了数据返回Json格式，XML 格式如下：                                                                                                                <tuple xmlns="http://com.unicom.bopm/organization"><old><SM_ACCOUNT><USERNUM>849</USERNUM><ACC_ID>8bfb8ecf-44be-11e5-e654-db554f8e1fc1</ACC_ID><ACC_NAME>cyt</ACC_NAME><USER_NAME>cyt</USER_NAME><SORT_NO null="true" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/><STATUS_SIGN>1</STATUS_SIGN><CREATE_TIME>2015-07-25T08:26:31.0</CREATE_TIME><RN>1</RN></SM_ACCOUNT></old></tuple><tuple xmlns="http://com.unicom.bopm/organization"><old><SM_ACCOUNT><USERNUM>849</USERNUM><ACC_ID>1792f9ca-7c0a-11e5-e638-b0a2159517aa</ACC_ID><ACC_NAME>df001</ACC_NAME><USER_NAME>df001</USER_NAME><SORT_NO null="true" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/><STATUS_SIGN>1</STATUS_SIGN><CREATE_TIME>2015-07-24T05:33:31.0</CREATE_TIME><RN>2</RN></SM_ACCOUNT></old></tuple><tuple xmlns="http://com.unicom.bopm/organization"><old><SM_ACCOUNT><USERNUM>849</USERNUM><ACC_ID>73652d05-1afa-11e5-e638-a37a6f55dfca</ACC_ID><ACC_NAME>A</ACC_NAME><USER_NAME>A</USER_NAME><SORT_NO null="true" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/><STATUS_SIGN>1</STATUS_SIGN><CREATE_TIME>2015-07-24T05:30:34.0</CREATE_TIME><RN>3</RN></SM_ACCOUNT></old></tuple>

(1):为了方便，把任何对象转为数组

/** * 返回格式化厚的请求返回的实体对象(queryObject)方式 * @param entity */formatCordysAjaxQueryEntity : function (entity) {var arr = [];if (entity['tuple']) {$.cordys.utils.formatCustomObject(entity['tuple']).forEach(function (value) {var prop = Object.keys(value.old)[0];arr.push(value['old'][prop]);});}return arr;},/** * 把一个对象转换成对象数组 * @param obj * @returns {*} */formatCustomObject : function (obj) {if (!obj.length) {var objArr = [];objArr[0] = obj;return objArr;} elsereturn obj;/** * 加载js文件 */},

（2）：在Cordys ajax上面继续封装一层

/** * 封装发送Ajax请求函数,返回延迟函数 * @param opts 方法属性 * @returns {*} 返回延迟函数 */sendCordysAjax : function (opts) {opts.dataType = 'xml json';opts.loginUrl = '/home/RJDB2014/unicom/home/login.html';return $.cordys.ajax(opts);}, $.cordys.utils.sendCordysAjax({        method: "ListAllAccount",         namespace: "http://com.unicom.bopm/organization",        parameters: {            pageNumber: pageNum,            pageSize: pageSize        }    }).done(function (orgResult) {            account = $.cordys.utils.formatCordysAjaxQueryEntity(orgResult);            if (account[0])                accountNum = account[0][Object.keys(account[0])[0]];            else                accountNum = 0;            $table.show();        }    ).fail(function (error) {            alert("查询失败，请重试！");            console.log(error);        }    );

（3）:bootstrap table 自动封装数据列子

HTML

<table id="table">    <thead>    <tr>        <th data-field="name">Name</th>        <th data-field="stargazers_count">Stars</th>        <th data-field="forks_count">Forks</th>        <th data-field="description">Description</th>    </tr>    </thead></table>

var data = [    {        "name": "bootstrap-table",        "stargazers_count": "526",        "forks_count": "122",        "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "    },    {        "name": "multiple-select",        "stargazers_count": "288",        "forks_count": "150",        "description": "A jQuery plugin to select multiple elements with checkboxes :)"    },    {        "name": "bootstrap-show-password",        "stargazers_count": "32",        "forks_count": "11",        "description": "Show/hide password plugin for twitter bootstrap."    },    {        "name": "blog",        "stargazers_count": "13",        "forks_count": "4",        "description": "my blog"    },    {        "name": "scutech-redmine",        "stargazers_count": "6",        "forks_count": "3",        "description": "Redmine notification tools for chrome extension."    }];$(function () {    $('#table').bootstrapTable({        data: data    });});

Result :

http://bootstrap-table.wenzhixin.net.cn/examples/#card-view

ss['tuple'][0]['old']ss['tuple']['old']

BootStrap 分页

前端 html<input type="button" id="searchProc" value="查询" class="btn btn-danger" onClick="reloadTable(getAccountByValue);"/><div class="col-md-12 text-center"><ul class="pagination" id="myPager"></ul></div>var account = [];var accountNum;function reloadTable(ajaxFunction) {    $table.bootstrapTable("destroy");    $table.bootstrapTable({        height: 470,        clickToSelect: true,        SingleSelect: true,        ajax: ajaxFunction,        cache: false,        sidePagination: "server",        pagination: true    });}//查询按钮时的方法function getAccountByValue(params) {    sendCordysGetRequest((params.data.offset / params.data.limit + 1), params.data.limit)        .done(function () {            params.success({                total: accountNum,                rows: account            });            params.complete()        });}function sendCordysGetRequest(pageNum, pageSiz) {    var v_acc_name = $("#S_ACC_NAME").val();    var v_user_name = $("#S_USER_NAME").val();    return $.cordys.utils.sendCordysAjax({        method: "GetAccountByValue", //通过查询条件查询租户内租户账号信息        namespace: "http://com.unicom.bopm/organization",        parameters: {            acc_name: v_acc_name,            user_name: v_user_name,            pageNumber: pageNum,            pageSize: pageSiz        }    }).done(function (orgResult) {            account = $.cordys.utils.formatCordysAjaxQueryEntity(orgResult);            if (account[0])                accountNum = account[0][Object.keys(account[0])[0]];            else                accountNum = 0;        }    ).fail(function (error) {            alert("查询失败，请重试！");            console.log(error);        }    );}

0 0