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>