首页 > 代码库 > 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用法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。