Cordys HTML5 SDK BootStrap

最新推荐文章于 2021-06-26 07:58:46 发布

陈勇士

最新推荐文章于 2021-06-26 07:58:46 发布

阅读量830

点赞数

分类专栏： Cordys JavaScript

本文链接：https://blog.youkuaiyun.com/chenyongtu110/article/details/47102157

版权

Cordys 同时被 2 个专栏收录

70 篇文章

订阅专栏

JavaScript

19 篇文章

订阅专栏

如下例子  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;
	} else
		return 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);
        }
    );
}