首页 > 代码库 > Dojo Grid结合Ajax用法

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="http://www.mamicode.com/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 = http://www.mamicode.com/datas.items[index].TableName;"";        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 = http://www.mamicode.com/‘" + 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 = http://www.mamicode.com/datas.items[index].FieldName;"";        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 = http://www.mamicode.com/‘" + 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 = http://www.mamicode.com/datas.items[index].LookUpField;",");        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 = http://www.mamicode.com/‘" + 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 = http://www.mamicode.com/obj.value.split("/")[0].toString();        if (fieldValue =http://www.mamicode.com/= null) { return false; }"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 =http://www.mamicode.com/="自定义") { value = "http://www.mamicode.com/Defined"; }        if (value =http://www.mamicode.com/="标准") { value = "http://www.mamicode.com/Standard"; }        //if(value =http://www.mamicode.com/="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=http://www.mamicode.com/"#\" 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=http://www.mamicode.com/"#\" 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>

  

Dojo Grid结合Ajax用法