FineUI 官方论坛

标题: FineUI 评分控件在Grid中 [打印本页]
作者: 棕榈    时间: 2020-2-10 18:08
标题: FineUI 评分控件在Grid中
本帖最后由 棕榈 于 2020-2-10 18:07 编辑

FineUI 评分控件在Grid中


[attach]12216[/attach]



之前的FineUI评分控件https://fineui.com/bbs/forum.php?mod=viewthread&tid=22354&fromuid=5871，是不可以直接显示在Grid中的，它是对NumberBox的包装，在常规Grid编辑模式下是不允许每一行都创建不同的NumberBox，所以我们需要单独创建了一个Grid包装方法。


使用方法与创建渲染列是一样的，代码：

  1. function renderRating(value) {
  2.         return F.ext.renderRating({
  3.                 value: value
  4.         });
  5. }
复制代码

将 renderRating 放入渲染函数，代码：

  1. F.RenderField().HeaderText("评分").DataField("Rating").FieldType(FieldType.Float).RendererFunction("renderRating")
复制代码


这样就可以完成所有的操作了，与普通渲染列没有区别。

如果想加入更多参数，代码：

  1. function renderRating(value) {
  2.         return F.ext.renderRating({
  3.                 value: value,
  4.                 icon: 'trophy',
  5.                 count: 11,
  6.                 size: 20,
  7.                 color: '#16a085',
  8.                 allowHalf: true,
  9.                 readonly: false
  10.         });
  11. }
复制代码


下面是示例的代码：

  1. @page
  2. @model FineUICore.EmptyProject.RazorPages.Pages.GridModel
  3. @{
  4.     ViewBag.Title = "Grid";
  5.     var F = @Html.F();
  6. }

  8. @section body {
  9.     <h2>Grid中的评分控件</h2>
  10.     @(F.Grid().IsFluid(true).CssClass("blockpanel").Title("表格").ShowHeader(true).ShowBorder(true).ID("Grid1").DataIDField("Id").DataTextField("Name").AllowCellEditing(true)
  11.         .Columns(
  12.             F.RowNumberField(),
  13.             F.RenderField().HeaderText("姓名").DataField("Name").Width(100),
  14.             F.RenderField().HeaderText("性别").DataField("Gender").FieldType(FieldType.Int).RendererFunction("renderGender").Width(60),
  15.             F.RenderField().HeaderText("入学年份").DataField("EntranceYear").FieldType(FieldType.Int).Width(100),
  16.             F.RenderCheckField().HeaderText("是否在校").DataField("AtSchool").RenderAsStaticField(true).Width(80),
  17.             F.RenderField().HeaderText("只读评分").DataField("Rating").FieldType(FieldType.Float).RendererFunction("renderRating").Width(135),
  18.             F.RenderField().HeaderText("五星评分").DataField("Rating2").FieldType(FieldType.Float).RendererFunction("renderRating2").Width(135),
  19.             F.RenderField().HeaderText("奖杯评分").DataField("Rating3").FieldType(FieldType.Float).RendererFunction("renderRating3").Width(135),
  20.             F.RenderField().HeaderText("注册日期").DataField("EntranceDate").FieldType(FieldType.Date).Renderer(Renderer.Date).RendererArgument("yyyy-MM-dd").ExpandUnusedSpace(true)
  21.         )
  22.         .DataSource(DataSourceUtil.GetSimpleDataTable())
  23.     )
  24.     <br>
  25.     <br>

  27. }

  29. @section script {
  30.     <script src="~/res/js/fineui-rating.js"></script>
  31.     <script>
  32.         function renderGender(value) {
  33.             return value == 1 ? '男' : '女';
  34.         }

  36.         function renderRating(value) {
  37.             return F.ext.renderRating({
  38.                 value: value,
  39.                 readonly: true
  40.             });
  41.         }

  43.         function renderRating2(value) {
  44.             return F.ext.renderRating({
  45.                 value: value
  46.             });
  47.         }

  49.         function renderRating3(value) {
  50.             return F.ext.renderRating({
  51.                 value: value,
  52.                 icon: 'trophy'
  53.             });
  54.         }
  55.     </script>
  56. }
复制代码


fineui-rating.js 文件请到知识星球下载。




作者: erp8@live.cn    时间: 2020-2-12 10:55
现在MVC 版中显示为方框.请问一下这里的五角星在哪里定义!
作者: ramble5956    时间: 2020-2-13 12:41
这个很不错，赞一个！ 可惜不懂MVC，用的是FineUIPro，请问WebForm里该怎么用？有没Demo可以下载一下？谢谢！



欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/) Powered by Discuz! X3.4