数据表格行内编辑
<h1>数据表格行内编辑</h1>
<p>数据表格所有使用行内编辑的列字段,都必须在<code>form</code>表单中定义一个相同的表单字段,否则将无法进行编辑。</p>
<h3>文本 (editable)</h3>
<p>启用</p>
<pre><code class="language-php">$grid-&gt;column('title')-&gt;editable();
// 编辑成功后刷新页面
$grid-&gt;column('nickname')-&gt;editable(true);</code></pre>
<p>效果
<img src="https://cdn.learnku.com/uploads/images/202109/14/38389/mX4Za4nj1y.png!large" alt="" /></p>
<h3>开关 (switch)</h3>
<p>快速将列变成开关组件,使用方法如下:</p>
<pre><code class="language-php">$grid-&gt;column('status')-&gt;switch();
// 设置颜色
use Dcat\Admin\Admin;
$grid-&gt;column('status')-&gt;switch(Admin::color()-&gt;info());
$grid-&gt;column('status')-&gt;switch('#333');
</code></pre>
<p>这个功能需要你在<code>form</code>表单方法中同样设置一个<code>status</code>字段</p>
<pre><code class="language-php">$form-&gt;hidden('status')
-&gt;customFormat(function ($v) {
return $v == '打开' ? 1 : 0;
})
-&gt;saving(function ($v) {
return $v ? '打开' : '关闭';
});
// 或者
$form-&gt;switch('status')
-&gt;customFormat(function ($v) {
return $v == '打开' ? 1 : 0;
})
-&gt;saving(function ($v) {
return $v ? '打开' : '关闭';
});</code></pre>
<p>编辑成功后刷新页面</p>
<pre><code class="language-php">$grid-&gt;column('status')-&gt;switch('', true);</code></pre>
<h3>开关组 (switchGroup)</h3>
<p>> {tip} 注意:在<code>grid</code>中对某字段设置<code>switchGroup</code>默认的保存结果是<code>0</code>或<code>1</code>,如需修改可以通过<code>$form-&gt;hidden(xxx)-&gt;saving(...)</code>方法修改。</p>
<p>快速将列变成开关组件组,使用方法如下:</p>
<pre><code class="language-php">$grid-&gt;switch_group-&gt;switchGroup([
'hot' =&gt; '热门',
'new' =&gt; '最新',
'recommend' =&gt; '推荐',
'image.show' =&gt; '显示图片', // 更新对应关联模型
]);
// 或
// 不写label会自动从翻译文件翻译,具体使用请参照 “字段翻译” 章节
$grid-&gt;switch_group-&gt;switchGroup(['is_new', 'is_hot', 'published']);</code></pre>
<p>这个功能需要你在<code>form</code>表单方法中同样设置对应的字段</p>
<pre><code class="language-php">$form-&gt;switch('hot')
-&gt;customFormat(function ($v) {
return $v == '打开' ? 1 : 0;
})
-&gt;saving(function ($v) {
return $v ? '打开' : '关闭';
});
$form-&gt;switch('new')
-&gt;customFormat(function ($v) {
return $v == '打开' ? 1 : 0;
})
-&gt;saving(function ($v) {
return $v ? '打开' : '关闭';
});</code></pre>
<p>编辑成功后刷新页面</p>
<pre><code class="language-php">$grid-&gt;column('switch_group')-&gt;switchGroup([...], true);</code></pre>
<p><img src="{{public}}/assets/img/screenshots/grid-column-switch-group.png" alt="" /></p>
<h3>下拉选框 (select)</h3>
<pre><code class="language-php">$grid-&gt;column('options')-&gt;select([
1 =&gt; 'Sed ut perspiciatis unde omni',
2 =&gt; 'voluptatem accusantium doloremque',
3 =&gt; 'dicta sunt explicabo',
4 =&gt; 'laudantium, totam rem aperiam',
]);</code></pre>
<p><code>select</code> 也支持参数为闭包,使用方法和<code>editable</code>的<code>select</code>类似。</p>
<p>编辑成功后刷新页面</p>
<pre><code class="language-php">$grid-&gt;column('options')-&gt;select([...], true);</code></pre>
<p><img src="{{public}}/assets/img/screenshots/grid-column-select.png" alt="" /></p>
<h3>单选框 (radio)</h3>
<pre><code class="language-php">$grid-&gt;column('options')-&gt;radio([
1 =&gt; 'Sed ut perspiciatis unde omni',
2 =&gt; 'voluptatem accusantium doloremque',
3 =&gt; 'dicta sunt explicabo',
4 =&gt; 'laudantium, totam rem aperiam',
]);</code></pre>
<p><code>radio</code> 也支持参数为闭包,使用方法和<code>editable</code>的<code>select</code>类似。</p>
<p>编辑成功后刷新页面</p>
<pre><code class="language-php">$grid-&gt;column('options')-&gt;radio([...], true);</code></pre>
<p><img src="https://cdn.learnku.com/uploads/images/202109/14/38389/6Bo4phkB3f.png!large" alt="" /></p>
<h3>多选框 (checkbox)</h3>
<pre><code class="language-php">$grid-&gt;column('options')-&gt;checkbox([
1 =&gt; 'Sed ut perspiciatis unde omni',
2 =&gt; 'voluptatem accusantium doloremque',
3 =&gt; 'dicta sunt explicabo',
4 =&gt; 'laudantium, totam rem aperiam',
]);</code></pre>
<p><code>checkbox</code> 也支持参数为闭包,使用方法和<code>editable</code>的<code>select</code>类似。</p>
<p>编辑成功后刷新页面</p>
<pre><code class="language-php">$grid-&gt;column('options')-&gt;checkbox([...], true);</code></pre>
<p><img src="{{public}}/assets/img/screenshots/grid-column-checkbox.png" alt="" /></p>
<h3>textarea</h3>
<pre><code class="language-php">$grid-&gt;column('...')-&gt;textarea();</code></pre>
<p><img src="https://cdn.learnku.com/uploads/images/202109/14/38389/wViO5EoPBg.png!large" alt="" /></p>