Grails 3.3.9:选中复选框时调用控制器操作
Grails 3.3.9: Call controller action when checkbox is checked
总的来说,我对 Grails 和框架还比较陌生,所以这很可能是一个非常基本的问题。我能找到的唯一看起来有前途的解决方案是使用标签,这在 Grails 3 中显然已被弃用。类似的问题确实存在,但都是从那个时候开始的。
我正在尝试编写一种显示产品的方法,这些产品按子类别分组,然后再按类别分组。当我的页面加载时,会从我的数据库请求子类别和类别,并在视图中呈现选择选项(Select-标签和复选框)。
选中代表子类别的复选框之一时,我需要 运行 数据库查询以获取产品信息,并通过为我得到的每一行呈现模板来更新 HTML 元素背部。我有一个控制器动作可以完成这一切。我唯一的问题是我需要一种方法来在选中一个复选框时调用控制器操作。
我也许可以通过使用 actionSubmit 和一个隐藏的提交按钮来解决这个问题,只要复选框被选中,javascript 就会点击该按钮,但这似乎不是一个合适的解决方案。
我可能在这里遗漏了一些非常基本的功能,但我已经进行了彻底的搜索,但到目前为止还没有找到合适的解决方案,可能是因为我没有使用正确的搜索词。如果有人可以帮助我,我会很高兴。已经非常感谢了!
以下示例使用 javascript 函数激活以响应复选框为 checked/unchecked,其值被传递到一个操作,您可以从该操作中使用复选框的值执行任何操作,运行 您的查询等。目前,该操作呈现一个模板以使用数据库结果更新视图。
index.gsp
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<script type="text/javascript">
$(document).ready(function(){
$( '#cb' ).click( function() {
var checked = $(this).is(":checked");
$.ajax( {
url: "/yourController/yourAction?checked=" + checked,
type: "get",
success: function ( data ) {
$( '#resultDiv' ).html( data )
},
error: function(jqXHR, textStatus, errorThrown) {
console.log( 'Error rendering template ' + errorThrown )
}
} );
})
});
</script>
</head>
<body>
<div id="resultDiv"></div>
<g:form>
<g:checkBox name="cb" />
</g:form>
</body>
你的控制器
class YourController {
def yourAction() {
// you may want to do something with the value of params.checked here?
def dbResults = YourDomain.getStuff()
render ( template: 'theTemp', model: [dbResults: dbResults] )
}
}
_theTemp.gsp
<table>
<caption>Table of stuff</caption>
<g:each in="${dbResults}" var="aThing">
<tr>
<td>${aThing}</td>
</tr>
</g:each>
</table>
总的来说,我对 Grails 和框架还比较陌生,所以这很可能是一个非常基本的问题。我能找到的唯一看起来有前途的解决方案是使用标签,这在 Grails 3 中显然已被弃用。类似的问题确实存在,但都是从那个时候开始的。
我正在尝试编写一种显示产品的方法,这些产品按子类别分组,然后再按类别分组。当我的页面加载时,会从我的数据库请求子类别和类别,并在视图中呈现选择选项(Select-标签和复选框)。
选中代表子类别的复选框之一时,我需要 运行 数据库查询以获取产品信息,并通过为我得到的每一行呈现模板来更新 HTML 元素背部。我有一个控制器动作可以完成这一切。我唯一的问题是我需要一种方法来在选中一个复选框时调用控制器操作。
我也许可以通过使用 actionSubmit 和一个隐藏的提交按钮来解决这个问题,只要复选框被选中,javascript 就会点击该按钮,但这似乎不是一个合适的解决方案。
我可能在这里遗漏了一些非常基本的功能,但我已经进行了彻底的搜索,但到目前为止还没有找到合适的解决方案,可能是因为我没有使用正确的搜索词。如果有人可以帮助我,我会很高兴。已经非常感谢了!
以下示例使用 javascript 函数激活以响应复选框为 checked/unchecked,其值被传递到一个操作,您可以从该操作中使用复选框的值执行任何操作,运行 您的查询等。目前,该操作呈现一个模板以使用数据库结果更新视图。
index.gsp
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<script type="text/javascript">
$(document).ready(function(){
$( '#cb' ).click( function() {
var checked = $(this).is(":checked");
$.ajax( {
url: "/yourController/yourAction?checked=" + checked,
type: "get",
success: function ( data ) {
$( '#resultDiv' ).html( data )
},
error: function(jqXHR, textStatus, errorThrown) {
console.log( 'Error rendering template ' + errorThrown )
}
} );
})
});
</script>
</head>
<body>
<div id="resultDiv"></div>
<g:form>
<g:checkBox name="cb" />
</g:form>
</body>
你的控制器
class YourController {
def yourAction() {
// you may want to do something with the value of params.checked here?
def dbResults = YourDomain.getStuff()
render ( template: 'theTemp', model: [dbResults: dbResults] )
}
}
_theTemp.gsp
<table>
<caption>Table of stuff</caption>
<g:each in="${dbResults}" var="aThing">
<tr>
<td>${aThing}</td>
</tr>
</g:each>
</table>