【新特性速遞】表格中的進度條和評分

三生石上(FineUI控制元件)發表於2020-06-22

FineUIPro/Mvc/Core的下個版本（v6.4.0），我們會為表格增加進度條和評分支援（基礎版適用）。

 

之前已經做過介紹，下個版本會增加進度條和評分支援，這個是在NumberBox控制元件基礎上實現的： 

【新特性速遞】表格中的進度條和評分

【新特性速遞】表格中的進度條和評分

 

之前的介紹文章分別在：

進度條：https://www.cnblogs.com/sanshi/p/13098126.html

評分：https://www.cnblogs.com/sanshi/p/13156337.html

 

 

但是表格不能引入NumberBox控制元件，這就需要單獨的支援：

  • 新增JS函式：F.progressHtml、F.rateHtml、F.rateEvents。
  • 新增示例：表格控制元件/單元格編輯/雜項/單元格編輯（進度條）；單元格編輯（評分）。

 

首先看下錶格中的進度條：

【新特性速遞】表格中的進度條和評分

 

我們重點關注下進度條列：

<f:RenderField Width="200px" ColumnID="Progress1" DataField="Progress1" FieldType="Int" HeaderText="進度條1" RendererFunction="renderProgress1" />
<f:RenderField Width="200px" ColumnID="Progress2" DataField="Progress2" FieldType="Int" HeaderText="進度條2" RendererFunction="renderProgress2" />

對應的單元格渲染函式：

function renderProgress1(value) {
	return F.progressHtml(value, {
		textVisible: true
	});
}

function renderProgress2(value) {
	return F.progressHtml(value, {
		height: 15,
		textVisible: true,
		textInside: true
	});
}

F.progressHtml用來返回一段進度條的HTML程式碼，詳細的引數可以參考API文件：

https://fineui.com/js/api/F.html#.progressHtml

【新特性速遞】表格中的進度條和評分

　　

　　

表格中的評分：

【新特性速遞】表格中的進度條和評分

我們來關注下評分列：

<f:RenderField Width="150px" ColumnID="Rate1" DataField="Rate1" FieldType="Int" HeaderText="只讀評分" RendererFunction="renderRate1" />
<f:RenderField Width="200px" ColumnID="Rate2" DataField="Rate2" FieldType="Int" HeaderText="五星評分" RendererFunction="renderRate2" />
<f:RenderField Width="200px" ColumnID="Rate3" DataField="Rate3" FieldType="Float" HeaderText="自定義評分" RendererFunction="renderRate3" />

對應的單元格渲染函式：

var desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
function renderRate2Text(val) {
	var rateText = '-';
	if (val > 0) {
		rateText = desc[val - 1];
	}
	return rateText;
}


function renderRate1(value) {
	return F.rateHtml(value, {
		readonly: true
	});
}

function renderRate2(value) {
	return F.rateHtml(value, {
		textVisible: true,
		textRenderer: renderRate2Text
	});
}

function renderRate3(value) {
	return F.rateHtml(value, {
		allowHalf: true,
		iconFont: 'f-iconfont-trophy',
		textVisible: true
	});
}

注意，上例中的renderRate2中定義了一個回撥函式 renderRate2Text，用來生成評分文字，這個是 NumberBox 支援的評分邏輯是一樣的。

 

F.rateHtml用來返回一段評分的HTML程式碼，詳細的引數可以參考API文件：　　

https://fineui.com/js/api/F.html#.rateHtml

【新特性速遞】表格中的進度條和評分　　

 

 

 

FineUIPro/Mvc/Core v6.4.0 官網示例已更新，現在就可以線上看效果了：

評分：https://pro.fineui.com/#/form/numberbox_rate.aspx

進度條：https://pro.fineui.com/#/form/numberbox_progress.aspx

表格中的評分：https://pro.fineui.com/#/grideditor/grideditor_rate.aspx

表格中的進度條：https://pro.fineui.com/#/grideditor/grideditor_progress.aspx

 

 

注：評分和進度條支援都是基礎版適用的！

歡迎入夥：https://fineui.com/fans/

 

 

三石出品，必屬精品 

 

相關文章