一步一步搭框架(asp.netmvc+easyui+sqlserver)-02

一步一步搭框架(asp.netmvc+easyui+sqlserver)-02 我們期望簡潔帶前臺代碼，如下：為了這樣簡潔的前臺，我們需要準備： 1、通用的佈局模板_Layout.cshtml。base.css、base.js、defaultSettings.js、tool.js和private. ...

一步一步搭框架(asp.netmvc+easyui+sqlserver)-02

我們期望簡潔帶前臺代碼，如下：

<table id="dataGrid" class="easyui-datagrid" url="getList" toolbar="#toolbar">
    <thead>
        <tr>
            <th field="customerId" sortable="true" data-options="sortable:true" width="50">
                customerId
            </th>
            <th field="companyName" data-options="sortable:true" width="50">
                companyName
            </th>
            <th field="phone" width="50">
                phone
            </th>
            <th field="address" width="50">
                address
            </th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <div>
        <a class="easyui-linkbutton" iconcls="icon-add" onclick="add();">添加</a>
        <a class="easyui-linkbutton" iconcls="icon-edit" onclick="edit();">修改</a>
        <a class="easyui-linkbutton" iconcls="icon-remove" onclick="del();">刪除</a>
    </div>
    <div>
        <input id="queryBox" class="easyui-textbox" buttonicon="icon-search" style="width: 200px;"
            data-options="onClickButton:function(){loadList(loadListSettings);}" />
        <a class="easyui-linkbutton" iconcls="icon-find" onclick="showQueryWindow();">
            詳細查詢</a>
    </div>
</div>
<script type="text/javascript">
    var loadListSettings = { searchFields: "customerId,companyName", prompt: "請輸入客戶Id或公司名稱" };
</script>
<script type="text/javascript">
    pageInit();  
</script>

為了這樣簡潔的前臺，我們需要準備：

1、通用的佈局模板_Layout.cshtml。base.css、base.js、defaultSettings.js、tool.js和private.js見後面

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <link href='/webResource/easyui/themes/default/easyui.css' rel='stylesheet' type='text/css' />
    <link href='/webResource/easyui/themes/icon.css' rel='stylesheet' type='text/css' />
    <link href='/webResource/base.css' rel='stylesheet' type='text/css' />
    <script src="/webResource/jquery/jquery.min.js" type="text/javascript"></script>
     <script src="/webResource/jquery/json2.js" type="text/javascript"></script>
    <script src="/webResource/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/webResource/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="/webResource/tool.js" type="text/javascript"></script>
    <script src="/webResource/base.js" type="text/javascript"></script>
    <script src="/webResource/defaultSettings.js" type="text/javascript"></script>
    <script src="/webResource/private.js" type="text/javascript"></script>
    @RenderSection("scripts", required: false)
</head>
<body style="width: 100%; height: 100%; margin: 0px;">
    @RenderBody()
</body>
</html>

2、平臺樣式表base.css

.icon-find
{
    background: url('icons/find.png') no-repeat center center;
}

.datagrid-toolbar div:nth-child(1)
{
    float: left;
    width: 60%;
}
.datagrid-toolbar div:nth-child(2)
{
    margin-left: 60%;
    margin-right: 10px;
    width: auto;
    text-align: right;
}

3、基本方法腳本base.js

//取消自動渲染
$.parser.auto = false;

function pageInit() {

    //改變控制項預設值
    $.fn.linkbutton.defaults.plain = true;
    $.fn.datagrid.defaults.fit = true;
    $.fn.datagrid.defaults.fitColumns = true;
    $.fn.datagrid.defaults.pagination = true;

    //顯示ajax異常信息
    $(document).ajaxError(function (event, xhr, options, exc) {
        $.messager.alert({ title: '非同步請求出錯', msg: xhr.responseText, icon: "error" });
    });

    //地址欄傳參允許中文
    jQuery(document).ajaxSend(function (event, request, options) {
        options.url = encodeURI(options.url);
    });

    $.parser.parse();
}

function loadList(settings) {
    var settings = $.extend(true, {}, loadListDefaultSettings, settings);

    if ($("#" + settings.gridId).length == 0)
        $.messager.alert({ title: "系統異常", msg: "DataGrid：" + settings.gridId + "不存在！", icon: "error" });

    var quickQueryData = [];
    if ($("#" + settings.queryBoxId).length > 0) {
        var val = $("#" + settings.queryBoxId).textbox("getValue");
        if (settings.searchFields && val) {
            var keys = settings.searchFields.split(',');
            for (i = 0, len = keys.length; i < len; i++) {
                quickQueryData.push({ field: keys[i], method: 'inLike', value: val });
            }
        }
    }

    var queryData = []; //詳細查詢預留  

    //載入數據
    $("#" + settings.gridId).datagrid("load", { quickQueryData: JSON.stringify(quickQueryData), queryData: JSON.stringify(queryData) });
}

4、基本腳本預設值defaultSettings.js

//查詢參數設置
var loadListDefaultSettings = {
    url: "getList",
    gridId: "dataGrid",
    queryWindowId: "queryWindow",
    queryBoxId: "queryBox",
    searchFields: "Name",
    addQueryString: true,
    prompt: "請輸入"
};

5、可能需要使用的工具方法tool.js

//判斷是否包含地址欄參數
function hasQueryString(key, url) {
    if (typeof (url) == "undefined")
        url = window.location.search;

    var re = new RegExp("[?&]" + key + "=([^\\&]*)", "i");
    var a = re.exec(url);
    if (a == null) return false;
    return true;
}

//獲取地址欄參數,如果參數不存在則返回空字元串
function getQueryString(key, url) {
    if (typeof (url) == "undefined")
        url = window.location.search;
    var re = new RegExp("[?&]" + key + "=([^\\&]*)", "i");
    var a = re.exec(url);
    if (a == null) return "";
    return a[1];
}

//將當前地址欄參數加入到url
function addUrlSearch(url) {
    var newParams = [];

    var paramKeys = window.location.search.replace('?', '').split('&');
    for (var i = 0; i < paramKeys.length; i++) {
        var key = paramKeys[i].split('=')[0];
        if (key == "" || key == "_t" || key == "_winid" || key == "isTab")
            continue;
        if (!hasQueryString(key, url))
            newParams.push(paramKeys[i]);
    }

    if (url.indexOf('?') >= 0)
        return url + "&" + newParams.join('&');
    else
        return url + "?" + newParams.join('&');
}

//url增加參數
function addSearch(url, key, value) {
    if (!hasQueryString(key, url)) {
        if (url.indexOf('?') >= 0)
            return url + "&" + key + "=" + value;
        else
            return url + "?" + key + "=" + value;
    }
    else
        return url;
}

//獲取數組中對象的某個值，逗號分隔
function getValues(rows, attr) {
    var fieldValues = [];
    for (var i = 0; i < rows.length; i++) {
        if (rows[i] != null)
            fieldValues.push(rows[i][attr]);
    }
    return fieldValues.join(',');
}

6、可能需要使用的私有方法private.js，此文件包含的方法專供base.js使用，開發web時禁止使用

//替換掉Url中的{}參數
function replaceUrl(settings, pty) {
    if (!pty)
        pty = "url";
    if (!settings[pty])
        return;
    var str = settings[pty];
    var guid = "";
    var result = str.replace(/\{[0-9a-zA-Z_]*\}/g, function (e) {
        var key = e.substring(1, e.length - 1);

        if (key == "GUID") {
            if (!guid) {
                $.ajax({
                    url: "getGuid",
                    type: "post",
                    async: false,
                    success: function (text, textStatus) {
                        guid = text;
                    }
                });
            }
            return guid;
        }
        if (hasQueryString(key)) //從地址欄返回
            return getQueryString(key);
        if (settings.currentRow && settings.currentRow[key])//從當前行返回
            return settings.currentRow[key];
        if (settings.paramFrom) { //從指定控制項返回
            var ctrl = mini.get(settings.paramFrom);
            if (ctrl == undefined) {
                $.messager.alert({ title: 'UI出錯', msg: "Id為" + settings.paramFrom + "的控制項不存在！", icon: "error" });               
                return;
            }
            else if (ctrl.showCheckBox) {
                return getValues(ctrl.getCheckedNodes(), key);
            }
            else if (ctrl.getSelecteds)
                return getValues(ctrl.getSelecteds(), key);
            else if (ctrl.getValue)
                return ctrl.getValue();
        }

        return e;
    });

    settings[pty] = result;
    return result;
}

//轉化為全路徑
function changeToFullUrl(settings) {
    var url = settings.url;
    if (url.indexOf('/') == 0 || url.indexOf("http://") == 0 || url.indexOf('?') == 0 || url == "")
        return url;


    currentUrlPathName = window.location.pathname;

    var currentPathNameParts = currentUrlPathName.split('/');
    var pathNameParts = url.split('?')[0].split('/');
    if (currentPathNameParts[currentPathNameParts.length - 1] == "")
        currentPathNameParts.pop(); //去掉一個反斜線
    if (pathNameParts[pathNameParts.length - 1] == "")
        pathNameParts.pop(); //去掉一個反斜線


    var index = currentPathNameParts.length - 1;

    for (var i = 0; i < pathNameParts.length; i++) {
        if (pathNameParts[i] == "..") {
            index = index - 1;
            if (index <= 0) {
                $.messager.alert({ title: "系統異常", msg: "Url錯誤：" + url + "！", icon: "error" });
return;
            }
            continue;
        }

        if (index < currentPathNameParts.length)
            currentPathNameParts[index] = pathNameParts[i];
        else
            currentPathNameParts.push(pathNameParts[i]);
        index = index + 1;
    }
    var length = currentPathNameParts.length;
    for (var i = index; i < length; i++) {
        currentPathNameParts.pop();
    }

    var result = currentPathNameParts.join('/');

    if (url.indexOf('?') > 0)
        result += url.substring(url.indexOf('?'));

    settings.url = result;
}

以上是目前的全部前臺代碼。