Dojo Grid结合Ajax用法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomerDefinedOutputField.aspx.cs" Inherits="SparkBiz.Payroll.CustomerDefinedOutputField" %>
<style>
       @import "../public/prod1.5.37.1/dojo1.5/dijit/themes/claro/claro.css";
	   @import "../public/prod1.5.37.1/dojo1.5/dijit/themes/soria/soria.css";
	   @import "../public/prod1.5.37.1/dojo1.5/dijit/themes/nihilo/nihilo.css";
	   @import "../public/prod1.5.37.1/dojo1.5/dijit/themes/tundra/tundra.css";
	   @import "../public/prod1.5.37.1/dojo1.5/dojo/resources/dojo.css";
	   @import "../public/prod1.5.37.1/dojo1.5/dojox/grid/enhanced/resources/claroEnhancedGrid.css";
	   @import "../public/prod1.5.37.1/dojo1.5/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
	   @import "../public/prod1.5.37.1/dojo1.5/dijit/themes/claro/document.css";         

       #gridList
       {
            width:100%;
            height:556px;
            border:1px solid silver;
       }
    .spanClass {
        color:red
    }
</style>

<div id="ListRoot" style="position:absolute; top:20px; width:100%;">
</div>
<script src="Modules/Payroll/JS/json2.js" type="text/javascript"></script>
<script type="text/javascript">
    dojo.require("dijit.layout.SplitContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("revit.form.Button");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.parser");
</script>

<%--Group类别样式--%>
<style type="text/css">
    #ulGroup
    {
        font:12px verdana, arial, sans-serif;
    }
    #ulGroup li a
    {
        display:block;
        padding:8px 20px;
        text-decoration:none;
    }
    #ulGroup li a:hover
    {
        background:#4aabbe;
        color:#fff;
        text-decoration:none;
    }
</style>
<%--构造列结构以及绑定控件事件--%>
<script type="text/javascript">
    var gridCells =
    [
        {
            field: "PRBatchFieldName",
            name: "<%=RM.GetString("HeadDefinedYlX") %>",
            width: "200px"
        },
        {
            field: "TableName",
            name: "<% = RM.GetString("TableName") %>",
            formatter: SetTablesHtml,
            width: "170px"
        },
        {
            field: "FieldName",
            name: "<% = RM.GetString("FieldName") %>",
            formatter: SetFilesHtml,
            width: "300px"
        },
        {
            field: "LookUpField",
            name: "LookUp",
            formatter: SetLookUpHtml,
            width: "200px"
        }
    ];

    //设置TableName样式
    function SetTablesHtml(value, rowIndex) {
        var grid = dijit.byId("gridList");
        var index = grid.store.getValue(grid.getItem(rowIndex), "Index");
        value = datas.items[index].TableName;
        var selTabName = datas.items[index].selTabName;
        var GroupName = datas.items[index].GroupName;
        var innerHtml = "";
        var array = value.toString().split(",");
        if (GroupName == "Defined") {
            innerHtml += "<select id='selTab" + index + "' style=\"width:100%;\;font-family:Tahoma;font-size:11px\" onchange=\"selectTable_onchange_click(this,'" + index + "')\">";
            for (var i = 0; i < array.length; i++) {
                var selStr = "";
                if (array[i] == selTabName)
                    selStr = "selected=selected";
                innerHtml += "<option " + selStr + " value = '" + array[i] + "'>" + array[i] + "</option>";
            }
            innerHtml += "</select>";
        }
        else {
            gridCells[0].width = "200px";
            innerHtml += "<span style=\"width:100%\">";
            innerHtml += array[0];
            innerHtml += "</span>";
        }
        return innerHtml;
    }

    //设置Filed样式
    function SetFilesHtml(value, rowIndex) {
        var grid = dijit.byId("gridList");
        var index = grid.store.getValue(grid.getItem(rowIndex), "Index");
        value = datas.items[index].FieldName;
        var selFieldName = datas.items[index].SelFieldName;
        var GroupName = datas.items[index].GroupName;
        var innerHtml = "";
        var array = value.toString().split(",");
        if (GroupName == "Defined") {
            innerHtml += "<select id='selField" + index + "' style=\"width:100%;\font-family:Tahoma;font-size:11px\" onchange=\"selectField_onchange_click(this,'" + index + "')\">";
            for (var i = 0; i < array.length; i++) {
                var selStr = "";
                if (array[i].split("/")[0] == selFieldName)
                    selStr = "selected=selected";
                innerHtml += "<option " + selStr + " value = '" + array[i] + "'>" + array[i] + "</option>";
            }
            innerHtml += "</select>";
        }
        else {
            innerHtml += "<span style=\"width:100%\">";
            innerHtml += array[0];
            innerHtml += "</span>";
        }
        return innerHtml;
    }

    //设置LookUp样式
    function SetLookUpHtml(value, rowIndex) {
        var grid = dijit.byId("gridList");
        var index = grid.store.getValue(grid.getItem(rowIndex), "Index");
        value = datas.items[index].LookUpField;
        var selLookup = datas.items[index].selLookup;
        var GroupName = datas.items[index].GroupName;
        var array = value.toString().split(",");
        var innerHtml = "";
        if (GroupName == "Defined") {
            if (selLookup == "") {
                innerHtml += "<select id='sellookup" + index + "' style=\"width:100%;\font-family:Tahoma;font-size:11px;display:none\" onchange=\"selectLookUp_onchange_click(this,'" + index + "')\">";
            }
            else {
                innerHtml += "<select id='sellookup" + index + "' style=\"width:100%;\font-family:Tahoma;font-size:11px\" onchange=\"selectLookUp_onchange_click(this,'" + index + "')\">";
            }
            for (var i = 0; i < array.length; i++) {
                var selStr = "";
                if (array[i].split("/")[0] == selLookup) {
                    selStr = "selected=selected";
                }
                innerHtml += "<option " + selStr + " value = '" + array[i] + "'>" + array[i] + "</option>";
            }
            innerHtml += "</select>";
        }
        else {
            innerHtml += "<span style=\"width:100%\">";
            innerHtml += array[0];
            innerHtml += "</span>";
        }
        return innerHtml;
    }

    //Table Onchange事件
    function selectTable_onchange_click(obj, rowIndex) {
        //返回TableName值给jasonMain
        datas.items[rowIndex].selTabName = obj.value;

        //找寻该表下的字段
        SelectFieldByTable(obj.value, rowIndex);
    }

    //Field Onchange事件
    function selectField_onchange_click(obj, rowIndex) {
        var fieldValue = obj.value.split("/")[0].toString();
        if (fieldValue == null) { return false; }
        //获取TableName
        var seltableObj = document.getElementById("selTab" + rowIndex);

        //返回Field值给jasonMain
        datas.items[rowIndex].SelFieldName = fieldValue;
        SelectLookUpOrPickList(seltableObj.value, obj.value, rowIndex);
    }

    //LookUp Onchange事件
    function selectLookUp_onchange_click(obj, rowIndex) {
                          //返回LookUp值给jasonMain
                          datas.items[rowIndex].selLookup = obj.value.split("/")[0];
                      }

</script>

<%--事件处理方法--%>
<script>
    var datas;
    //生成数据Table
    function SetDataSource(jsonObj, jsonGroup) {
        datas = {
            identifier: 'id',
            label: 'id',
            items: []
        };

        var i, len;
        for (i = 0, len = jsonObj.length; i < len; ++i) {
            datas.items.push(dojo.mixin({ 'id': i + 1 }, jsonObj[i % len]));
        }

        var store = new dojo.data.ItemFileWriteStore({ data: datas });

        var gridList;
        gridList = new dojox.grid.DataGrid({
            id: 'gridList',
            canSort: false,//禁用列头排序功能
            store: store,
            structure: gridCells
        });

        gridList.placeAt('grid');
        gridList.startup();

        SetDataSourceByGroup("Defined");
    }

    //判断字段是否已经被选择
    function IsSelectdByField(TableName, FiledName, rowIndex) {
        var arrays = new Array();
        var dataItems = datas.items;
        for (var i = 0; i < dataItems.length; i++) {
            if (dataItems[i].GroupName != "Defined") { continue; }
            if (dataItems[i].SelFieldName == null || dataItems[i].SelFieldName == undefined || dataItems[i].SelFieldName == "" || dataItems[i].SelFieldName == "undefined")
            { continue; }
            if (dataItems[i].selTabName == TableName && dataItems[i].SelFieldName == FiledName) {
                return true;
                break;
            }
        }
        return false;
    }

    //查找字段通过TableName
    function SelectFieldByTable(TableName, rowIndex) {
        var FieldStr = null;
        var flg = false;
        var xhrObj = {
            url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SearchFiledByTableName",
            timeout: 50000,
            handleAs: "json",
            content: { "TableName": TableName },
            form: null,
            sync: true
        };
        //发起ajax请求
        var def = dojo.xhrPost(xhrObj);
        def.then(function (resp) {
            if (resp) {
                //操作响应数据
                flg = true;
                FieldStr = resp.FieldStr;
            }
        }, function (err) { alert(err); });

        //赋值
        datas.items[rowIndex].FieldName = FieldStr;

        if (FieldStr === null) { ClearDataAll(rowIndex); return; }

        //清除PickList和LookUp数据
        ClearData(rowIndex);

        // 重新生成子阶option
        addoptions("Table", "selField", rowIndex, FieldStr);
    }

    //清空PickList和LookUp
    function ClearData(rowIndex) {
        //清除PickList和LookUp数据
        var selLookUpObj = document.getElementById("sellookup" + rowIndex);
        selLookUpObj.options.length = 0;
    }

    //清空Field和PickList和LookUp
    function ClearDataAll(rowIndex) {
        //清除PickList和LookUp数据
        var selFieldObj = document.getElementById("selField" + rowIndex);
        selFieldObj.options.length = 0;
        datas.items[rowIndex].SelFieldName = "";

        //清除PickList和LookUp数据
        var selLookUpObj = document.getElementById("sellookup" + rowIndex);
        selLookUpObj.options.length = 0;
        datas.items[rowIndex].selLookup = "";
        document.getElementById("sellookup" + rowIndex).style.display = "none";
    }

    //获取PickList或者LookUP
    function SelectLookUpOrPickList(TableName, FiledName, rowIndex) {
        var FieldStr = "";
        var FieldType = "";
        var flg = false;
        var xhrObj = {
            url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SearchFiledByFileName",
            timeout: 50000,
            handleAs: "json",
            content: { "FiledName": FiledName, "TableName": TableName },
            form: null,
            sync: true
        };
        //发起ajax请求
        var def = dojo.xhrPost(xhrObj);
        def.then(function (resp) {
            if (resp) {
                //操作响应数据
                flg = true;
                FieldStr = resp.FieldStr;
                FieldType = resp.jasonType;
            }
        }, function (err) { alert(err); });

        var selFieldObj = null;
        switch (FieldType) {
            case "8"://LookUp
                selFieldObj = "sellookup";
                document.getElementById(selFieldObj + rowIndex).style.display = "";
                break;
            default:
                document.getElementById("sellookup" + rowIndex).style.display = "none";
                return;
        }

        //赋值给选择的LookUp
        datas.items[rowIndex].LookUpField = FieldStr;

        //清除PickList和LookUp数据
        ClearData(rowIndex);

        if (selFieldObj == null) { return; }

        // 重新生成子阶option
        addoptions(FieldType, selFieldObj, rowIndex, FieldStr);
    }

    //添加Options
    function addoptions(type, parentId, rowIndex, subarray) {
        //获取父阶
        var selFieldObj = document.getElementById(parentId + rowIndex);
        //清除父阶
        selFieldObj.options.length = 0;
        //添加子阶
        var array = subarray.toString().split(",");
        for (var i = 0; i < array.length; i++) {
            selFieldObj.options.add(new Option(array[i], array[i]));
        }
        if (array != null) {
            switch (type) {
                case "Table":
                    datas.items[rowIndex].SelFieldName = array[0].toString().split("/")[0].toString();
                    break;
                case "8":
                    datas.items[rowIndex].selLookup = array[0].toString().split("/")[0].toString();
                    break;
                default:
            }
        }
    }

    //初始事件
    function initPage_Load() {
        var jsonMain = "";
        var jsonTable = "";
        var jsonGroup = "";
        var flg = false;
        var xhrObj = {
            url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SearchDefineOutPutField",
            timeout: 50000,
            handleAs: "json",
            form: null,
            sync: true
        };
        //发起ajax请求
        var def = dojo.xhrPost(xhrObj);
        def.then(function (resp) {
            if (resp) {
                //操作响应数据
                flg = true;
                jsonMain = resp.jsonMain;
                jsonGroup = resp.jsonGroup;
                jsonTable = resp.jsonTable;
            }
        }, function (err) { alert(err); });

        //生成Group
        SetDataGroup(jsonGroup);
        //定义第一个列类别，默认显示
        var firstGroup = "";
        if (jsonGroup.length > 0)
            firstGroup = jsonGroup[0].GroupName;
        //生成数据Table
        SetDataSource(jsonMain, firstGroup);
    }

    revit.addOnLoad(_container_, function () {
        initPage_Load();
    });

    var arrayGroup;
    //选择Group类别,过滤数据
    function SetDataSourceByGroup(groupName) {
        var grid = dijit.byId("gridList");
        grid.focus.setFocusIndex(0, 1);
        grid.setQuery({ GroupName: "" + groupName + "" });
    }

    //单击Group类别,设置样式,过滤数据
    function GroupClick(obj, value) {
        if (value == "自定义") { value = "Defined"; }
        if (value == "标准") { value = "Standard"; }

        //if(value == "Standard"){SaveDataByGroupClick();}
        dojo.query("a").forEach(function (node, i) {
            node.style.backgroundColor = "";
            node.style.color = "";
        });;
        obj.style.backgroundColor = "#4aabbe";
        obj.style.color = "#fff";

        //数据过滤
        SetDataSourceByGroup(value);
    }

    //生成Group类别
    function SetDataGroup(jsonObj) {
        arrayGroup = new Array();
        var ulInnerHtml = "";
        var groupObj = document.getElementById("ulGroup");
        if (jsonObj != "") {
            var spanHtml = "";
            for (var i = 0; i < jsonObj.length; i++) {
                var groupName = jsonObj[i].GroupName;        //类别名称
                arrayGroup.push(groupName);
                if (i == 0) {
                    ulInnerHtml += "<li><a href=\"#\" style=\"background-color:#4aabbe;color:#fff\" onclick=\"GroupClick(this,'" + groupName + "')\">" + groupName + "</a></li>";
                    spanHtml += "<span id=\"span" + groupName + "\" style=\"color:red;font-size:12px\" >" + groupName + "</span>";
                }
                else {
                    ulInnerHtml += "<li><a href=\"#\" onclick=\"GroupClick(this,'" + groupName + "')\">" + groupName + "</a></li>";
                    spanHtml += "<span id=\"span" + groupName + "\" style=\"display:none;color:red;font-size:12px\">" + groupName + "</span>";
                }
            }
        }
        groupObj.innerHTML = ulInnerHtml;
    }

    //定义回传数据
    function ItemsToJsonString() {
        var arrays = new Array();
        var dataItems = datas.items;
        for (var i = 0; i < dataItems.length; i++) {
            if (dataItems[i].GroupName != "Defined") { continue; }
            //if (dataItems[i].SelFieldName == null || dataItems[i].SelFieldName == undefined || dataItems[i].SelFieldName == "" || dataItems[i].SelFieldName == "undefined")
            //{ continue; }
            var obj = new Object();
            obj.ZHPR_DEFINEDTABLE = dataItems[i].selTabName;
            obj.ZHPR_DEFINEDFILED = dataItems[i].SelFieldName;
            obj.ZHPR_MAPPINGOBJECT = "ZHPR_PRBATCHEMPLOYEEPROFILEDATA." + dataItems[i].PRBatchFieldName;
            obj.ZHPR_LOOKUPFILED = dataItems[i].selLookup;
            obj.ZHPR_PICKLISTFILED = "";//dataItems[i].selPicklist;
            arrays.push(obj);
        }
        return JSON.stringify(arrays);
    }

    //获取需要保存的数据个数
    function GetSaveCount() {
        var count = 0;
        var dataItems = datas.items;
        for (var i = 0; i < dataItems.length; i++) {
            if (dataItems[i].SelFieldName == null || dataItems[i].SelFieldName == undefined || dataItems[i].SelFieldName == "" || dataItems[i].SelFieldName == "undefined")
            { continue; }
            count++;
        }
        return count;
    }

    // 保存数据
    function SaveData() {
        //if (GetSaveCount() < 1) { alert("<%=RM.GetString("NotDataSave")%>"); return false; }
        var flg = "F";
        //定义ajax请求对象的属性
        var xhrObj = {
            url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SaveDefinedField",
            timeout: 50000,
            handleAs: "json",
            content: { "dataJsonStr": ItemsToJsonString() },
            form: null,
            sync: true
        };
        //发起ajax请求
        var def = dojo.xhrPost(xhrObj);
        def.then(function (resp) {
            if (resp) {
                //操作响应数据
                flg = resp.Message; //alert(resp.number);
            }
        }, function (err) { alert(err); return false; });
        if (flg == "") { return false; }
        dijit.byId('setImportTemplateForm').clearMessages();
        if (flg == "T") {
            dijit.byId("setImportTemplateForm").addInfoMessage('<%=RM.GetString("SaveSucceedMsg")%>');
        }
        else {
            dijit.byId("setImportTemplateForm").addErrorMessage('<%=RM.GetString("SaveFailedMsg")%>');
        }
        setTimeout("dijit.byId('setImportTemplateForm').clearMessages();", 2000);
        return false;
    }

    function SaveDataByGroupClick() {
        var flg = "F";
        //定义ajax请求对象的属性
        var xhrObj = {
            url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SaveDefinedField",
            timeout: 50000,
            handleAs: "json",
            content: { "dataJsonStr": ItemsToJsonString() },
            form: null,
            sync: true
        };
        //发起ajax请求
        var def = dojo.xhrPost(xhrObj);
        def.then(function (resp) {
            if (resp) {
                //操作响应数据
                flg = resp.Message; //alert(resp.number);
            }
        }, function (err) { alert(err); return false; });
        if (flg == "") { return false; }
        return false;
    }

    //返回
    function GoBack() {
        var url = HRnet.Environment.webServerRoot + "/Main.aspx/Home?dojo.preventCache=" + new Date();
        HRnet.Revolution.Form.DirtyPageCheck(
        function () {
            if (HRnet.Revolution.Form.RedirectToParentForm(false, false, true)) { return; }
            dijit.byId(HRnet.Revolution.Constants.Appcontainter).set("href", HRnet.Revolution.Form.CancelActionUrl, true);
        },
        url);
    }
</script>

<%--窗体结构--%>
<div id="setImportTemplateForm" onkeypress="keyPress" style="width:100%;" enctype="multipart/form-data" dojotype="revit.form.Form" method="post" canSort="false">
     <br />
    <input type="hidden"  id="hfMSTRID" />
     <div class="soria" style="width:98%;">
    <font size="1" >
		<div dojoType="dijit.layout.SplitContainer"
			 orientation="horizontal"
			 sizerWidth="7"
			 activeSizing="false"
			 style="border: 1px solid #bfbfbf; float: left; width: 100%; height: 600px;" canSort="false">

			 <div dojoType="dijit.layout.ContentPane" style="width:15%; background-color:#e5f1f1" id="prog_menu" >
                 <ul id="ulGroup">

                 </ul>
			 </div>		 

			 <div id="divContent" dojoType="dijit.layout.ContentPane" style="width:85%;border:2px;" sizeMin="40" sizeShare="50" canSort="false">
                 <table style="width:100%">
                     <tr>
                         <td>
                            <div id="grid" canSort="false">

                            </div>
                         </td>
                     </tr>
                </table>
			 </div>

		 </div>
      <button id="btnSave" dojotype="revit.form.Button" iconclass="save16" showlabel="true" onclick="return SaveData()"><%=RM.GetString("Save")%></button>
    </font>
</div>
</div>