如何从单元格创建边栏显示值？ [英] How do I make a Sidebar display values from cells?
本文介绍了如何从单元格创建边栏显示值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张Google表格，用作客户数据库。每个条目都需要存储很多变量（列），所以我认为如果可以使用侧栏显示活动行的所有值，查看每个条目会更容易。
例如：如果我点击单元格C1，它将在边栏中显示来自C1，C2，C3和C4的值。
这可能吗？我已经得到了尽可能让Sidebar显示，但我无法弄清楚如何从单元格获取值并将其输出到边栏。
谢谢你我已经用我的（非常）有限的智力达到了一个死胡同！
解决方案
类似这样的事情？
这个插件使用了来自如何从附加组件中查询Google文档以调用服务器功能 getRecord（）。该函数抓取当前选中的数据行，并将其返回到客户端（JavaScript）侧的 showRecord（）回调函数，该函数处理边栏中的表示。
这不完整 - 请留意TODO的评论。我不知道这是否值得进一步开发和发布？
Code.gs
/ **
* @OnlyCurrentDoc将脚本限制为仅访问当前电子表格。
* /
var SIDEBAR_TITLE ='记录查看器';
/ **
*添加一个包含项目的自定义菜单以显示侧边栏和对话框。
*
* @param {Object} e一个简单的onOpen触发器的事件参数。
* /
函数onOpen（e）{
SpreadsheetApp.getUi（）
.createAddonMenu（）
.addItem（'View records'，'showSidebar'）
.addToUi（）;
}
/ **
*安装加载项时运行;调用onOpen（）以确保菜单创建，
*任何其他初始化工作立即完成。
*
* @param {Object} e一个简单的onInstall触发器的事件参数。
* /
onInstall（e）{
onOpen（e）;
}
/ **
*打开一个侧边栏。侧栏结构在Sidebar.html
*项目文件中进行了介绍。
* /
函数showSidebar（）{
var ui = HtmlService.createTemplateFromFile（'Sidebar'）
.evaluate（）
.setSandboxMode（HtmlService.SandboxMode.IFRAME ）
.setTitle（SIDEBAR_TITLE）;
SpreadsheetApp.getUi（）。showSidebar（ui）;
}
/ **
*返回活动行。
*
* @return {Object []}头文件&行中所有单元格的值。
* /
函数getRecord（）{
//检索并返回边栏请求的信息。
var sheet = SpreadsheetApp.getActiveSheet（）;
var data = sheet.getDataRange（）。getValues（）;
var headers = data [0];
var rowNum = sheet.getActiveCell（）。getRow（）;
if（rowNum> data.length）return [];
var record = [];
for（var col = 0; col< headers.length; col ++）{
var cellval = data [rowNum-1] [col];
//日期必须作为字符串传递 - 现在使用固定格式
if（typeof cellval ==object）{
cellval = Utilities.formatDate（cellval，Session.getScriptTimeZone ），M / d / yyyy）;
}
// TODO：使用SheetConverter库格式化所有单元格值
record.push（{heading：headers [col]，cellval：cellval}）;
}
返回记录;
}
Sidebar.html
< pre-class =lang-html prettyprint-override>
<！ - 使用模板化HTML打印scriptlet导入常用样式表。 - >
<？！= HtmlService.createHtmlOutputFromFile（'Stylesheet'）。getContent（）; ？>
<！ - 下面是定义侧边栏元素结构的HTML代码。 - >
< div class =sidebar branding-below>
< p>
此侧栏显示一行中的所有单元格，作为记录。
< / p>
<！ - div-table类用于使一组div像表格一样工作。 - >
< div class =block div-tableid =sidebar-record-block>
< / div>
< div class =blockid =sidebar-button-bar>
< / div>
< div id =sidebar-status>< / div>
< / div>
<！ - 在下面输入侧栏底部品牌。 - >
< div class =sidebar bottom>
src =https://googledrive.com/host/0B0G1UdyJGrY6XzdjQWF4a1JYY1k/apps-script_2x.png >
< span class =grey branding-text> Mogsdad的记录浏览器< / span>
< / div>
<！ - 使用模板化HTML打印scriptlet导入JavaScript。 - >
<？！= HtmlService.createHtmlOutputFromFile（'SidebarJavaScript'）。getContent（）; ？>
SidebarJavascript.html
< script src =// ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"> ;</script>
< script>
/ **
*在边栏加载上运行初始化。
* /
$（function（）{
//在这里指定处理函数到边栏元素，如果需要的话
//在这里调用服务器来检索如果需要，构建
所需的信息//对话框
//开始轮询更新
poll（）;
}）;
/ **
*以给定的时间间隔轮询服务器端函数，将
*结果传递给successHandler回调函数。
*
* https://stackoverflow.com/a/24773178/1677912
*
* @param {Number}区间（可选）在民意测验之间以毫秒为单位的时间。
*默认为2s（2000ms）
* /
函数poll（interval）{
interval = interval || 1000;
setTimeout（）函数（
函数（
函数（元素）{
（）函数（）{
google.script.run
.withSuccessHandler（showRecord）
.withFailureHandler showStatus（msg，$（'＃button-bar'））;
element.disabled = false;
}）
.getRecord（）;
}，interval）;
};
/ **
*回调函数显示记录或电子表格的一行。
*
* @param {object []}数组字段标题&单元值
* /
函数showRecord（记录）{
if（record.length）{
for（var i = 0; i
var str =''+ i;
var fieldId ='field-'+（'0000'+ str）.substring（str.length）
//如果该字段＃在页面上不存在，则创建它是
if（！$（'＃'+ fieldId）.length）{
var newField = $（$。parseHTML（'< div id =''+ fieldId +'>< DIV>'））;
$（'＃sidebar-record-block'）。append（newField）;
}
//用新记录替换字段div的内容
$（'＃'+ fieldId）.replaceWith（'< div id =''+ fieldId +' class =div-table-row>< / div>'）;
$（'＃'+ fieldId）.append（$（'< div class =div-table-th>'+ record [i] .heading +'< / div>'））
.append（'< div class =div-table-td>'+ record [i] .cellval +'< / div>'）;
}
}
// TODO：隐藏超出当前记录长度的任何现有字段
//设置下一个轮询
poll（）;
}
/ **
*在边栏中显示给定的状态消息。
*
* @param {String} msg要显示的状态消息。
* @param {String} classId消息
*应显示为的消息类型（类id）。
* /
函数showStatus（msg，classId）{
$（'＃sidebar-status'）。removeClass（）。html（msg）;
if（classId）{
$（'＃sidebar-status'）。addClass（classId）;
}
}
< / script> b
Stylesheet.html
<！ - 此CSS包应用Google样式;它应该始终包含在内。 - >
< link rel =stylesheethref =https://ssl.gstatic.com/docs/script/css/add-ons.css>
< style>
标签{
font-weight：bold;
}
.branding-below {
bottom：54px;
top：0;
}
.branding-text {
left：7px;
职位：亲属;
top：3px;
}
.logo {
vertical-align：middle;
}
.width-100 {
width：100％;
box-sizing：border-box;
-webkit-box-sizing：border-box;
-moz-box-sizing：border-box;
}
＃sidebar-value-block，
＃dialog-elements {
background-color：#eee;
border-color：#eee;
border-width：5px;
border-style：solid;
}
＃sidebar-button-bar，
＃dialog-button-bar {
margin-bottom：10px;
}
.div-table {
display：table;
width：auto;
/ * background-color：#eee;
border：1px solid＃666666; * /
border-spacing：5px;
}
.div-table-row {
display：table-row;
width：auto;
明确：两者;
}
.div-table-td，.div-table-th {
display：table-cell;
width：200px;
background-color：rgb（230,230,230）;
}
.div-table-th {
/ * float：left; * /
font-weight：bold;
}
.div-table-td {
/ * float：right; * /
}
< / style>
I have a Google Sheet that I'm using as a database of clients. There are quite a lot of variables (columns) that I need to store per entry, so I thought that it would be easier to view each entry if I could have a Sidebar display all of the values of the active row.
Example: If I click cell C1, it will display the values from C1, C2, C3 and C4 in the sidebar.
Is this possible? I've gotten as far as getting the Sidebar to display but I cannot figure out how to get a value from a cell and print it to the Sidebar.
Thank you in advance, I've reached a dead end with my (very) limited intellect!
解决方案 Something like this?
This add-on uses the poller idea from How to poll a Google Doc from an add-on to call a server function getRecord(). That function grabs the row of data that is currently selected, and returns it to the showRecord() callback on the client (JavaScript) side, which handles the presentation in the sidebar.
It's not complete - watch for TODO comments. I wonder if this would be worth further developing and publishing?
Code.gs
/**
* @OnlyCurrentDoc Limits the script to only accessing the current spreadsheet.
*/
var SIDEBAR_TITLE = 'Record Viewer';
/**
* Adds a custom menu with items to show the sidebar and dialog.
*
* @param {Object} e The event parameter for a simple onOpen trigger.
*/
function onOpen(e) {
SpreadsheetApp.getUi()
.createAddonMenu()
.addItem('View records', 'showSidebar')
.addToUi();
}
/**
* Runs when the add-on is installed; calls onOpen() to ensure menu creation and
* any other initializion work is done immediately.
*
* @param {Object} e The event parameter for a simple onInstall trigger.
*/
function onInstall(e) {
onOpen(e);
}
/**
* Opens a sidebar. The sidebar structure is described in the Sidebar.html
* project file.
*/
function showSidebar() {
var ui = HtmlService.createTemplateFromFile('Sidebar')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle(SIDEBAR_TITLE);
SpreadsheetApp.getUi().showSidebar(ui);
}
/**
* Returns the active row.
*
* @return {Object[]} The headers & values of all cells in row.
*/
function getRecord() {
// Retrieve and return the information requested by the sidebar.
var sheet = SpreadsheetApp.getActiveSheet();
var data = sheet.getDataRange().getValues();
var headers = data[0];
var rowNum = sheet.getActiveCell().getRow();
if (rowNum > data.length) return [];
var record = [];
for (var col=0;col<headers.length;col++) {
var cellval = data[rowNum-1][col];
// Dates must be passed as strings - use a fixed format for now
if (typeof cellval == "object") {
cellval = Utilities.formatDate(cellval, Session.getScriptTimeZone() , "M/d/yyyy");
}
// TODO: Format all cell values using SheetConverter library
record.push({ heading: headers[col],cellval:cellval });
}
return record;
}
Sidebar.html
<!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<!-- Below is the HTML code that defines the sidebar element structure. -->
<div class="sidebar branding-below">
<p>
This sidebar displays all cells in a row, as a "record".
</p>
<!-- The div-table class is used to make a group of divs behave like a table. -->
<div class="block div-table" id="sidebar-record-block">
</div>
<div class="block" id="sidebar-button-bar">
</div>
<div id="sidebar-status"></div>
</div>
<!-- Enter sidebar bottom-branding below. -->
<div class="sidebar bottom">
<img alt="Add-on logo" class="logo" width="25"
src="https://googledrive.com/host/0B0G1UdyJGrY6XzdjQWF4a1JYY1k/apps-script_2x.png">
<span class="gray branding-text">Record Viewer by Mogsdad</span>
</div>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('SidebarJavaScript').getContent(); ?>
SidebarJavascript.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
/**
* Run initializations on sidebar load.
*/
$(function() {
// Assign handler functions to sidebar elements here, if needed.
// Call the server here to retrieve any information needed to build
// the dialog, if necessary.
// Start polling for updates
poll();
});
/**
* Poll a server-side function at the given interval, to have
* results passed to a successHandler callback.
*
* https://stackoverflow.com/a/24773178/1677912
*
* @param {Number} interval (optional) Time in ms between polls.
* Default is 2s (2000ms)
*/
function poll(interval) {
interval = interval || 1000;
setTimeout(function() {
google.script.run
.withSuccessHandler(showRecord)
.withFailureHandler(
function(msg, element) {
showStatus(msg, $('#button-bar'));
element.disabled = false;
})
.getRecord();
}, interval);
};
/**
* Callback function to display a "record", or row of the spreadsheet.
*
* @param {object[]} Array of field headings & cell values
*/
function showRecord(record) {
if (record.length) {
for (var i = 0; i < record.length; i++) {
// build field name on the fly, formatted field-1234
var str = '' + i;
var fieldId = 'field-' + ('0000' + str).substring(str.length)
// If this field # doesn't already exist on the page, create it
if (!$('#'+fieldId).length) {
var newField = $($.parseHTML('<div id="'+fieldId+'"></div>'));
$('#sidebar-record-block').append(newField);
}
// Replace content of the field div with new record
$('#'+fieldId).replaceWith('<div id="'+fieldId+'" class="div-table-row"></div>');
$('#'+fieldId).append($('<div class="div-table-th">' + record[i].heading + '</div>'))
.append('<div class="div-table-td">' + record[i].cellval + '</div>');
}
}
// TODO: hide any existing fields that are beyond the current record length
//Setup the next poll
poll();
}
/**
* Displays the given status message in the sidebar.
*
* @param {String} msg The status message to display.
* @param {String} classId The message type (class id) that the message
* should be displayed as.
*/
function showStatus(msg, classId) {
$('#sidebar-status').removeClass().html(msg);
if (classId) {
$('#sidebar-status').addClass(classId);
}
}
</script>
Stylesheet.html
<!-- This CSS package applies Google styling; it should always be included. -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<style>
label {
font-weight: bold;
}
.branding-below {
bottom: 54px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.logo {
vertical-align: middle;
}
.width-100 {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
}
#sidebar-value-block,
#dialog-elements {
background-color: #eee;
border-color: #eee;
border-width: 5px;
border-style: solid;
}
#sidebar-button-bar,
#dialog-button-bar {
margin-bottom: 10px;
}
.div-table{
display:table;
width:auto;
/* background-color:#eee;
border:1px solid #666666;*/
border-spacing:5px;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
}
.div-table-td, .div-table-th {
display:table-cell;
width:200px;
background-color:rgb(230, 230, 230);
}
.div-table-th {
/*float:left;*/
font-weight: bold;
}
.div-table-td {
/*float:right;*/
}
</style>
这篇关于如何从单元格创建边栏显示值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
