用于创建发票的 UI

发布于 2024-08-10 09:02:46 字数 404 浏览 6 评论 0 原文

目前,我正在制定一个定制的发票解决方案。我为客户创建了多种方式来创建他们的模板(HTML、Word、LaTex)并根据他们的模板获取发票。然而,这些发票是当事人手动生成的。

因此,过程是:

  • 请求创建新发票 创建
  • 初步发票
  • 用户有机会进行更改(即添加、删除、更改行)
  • 创建 pdf

需要明确的是,不需要创建初步发票格式与模板相同,但您应该能够添加/删除/更改行,并且对于每个单元格,指示该值是否应该在最终结果中可见。

我的问题是我找不到合适的方式来显示初步发票。我尝试了数据网格(默认、Telerik、devexpress),但它太混乱了。除了数据网格之外,我不知道我还能使用什么。

我可以最好地使用哪些控件来获得漂亮且可用的用户界面。

Currently, I'm in the process of making a custom solution for invoicing. I have created multiple ways for customers to create their template (HTML, Word, LaTex) and get invoices according to their template. However, these invoices are party manually generated.

So, the process is:

  • Request to create a new invoice
  • An preliminary invoice is created
  • The user gets a chance to make changes (i.e. add, remove, change rows)
  • Create a pdf

Just to be clear, the preliminary invoice does not need to be formatted as the template is, but you should be able to add/remove/change rows and for every cell, indicate whether the value should be visible in the final result.

My problem is that i cannot find a suitable way to display the preliminary invoices. I tried a datagrid (default, telerik, devexpress), but it's too messy. Besides a datagrid, i have no idea what i can use.

What controls can i use best to have a nice and usable UI.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

飞烟轻若梦 2024-08-17 09:02:46

此类事情的典型 UI 范例是将其视为两个独立的问题:为用户提供一种查看他可以修改的元素的方式,并让他能够修改任何特定元素。您可以使用列表控件(ListBoxListView,如果元素按层次结构组织或需要分组到类别中,则可能使用 TreeView)来呈现元素,然后当用户选择一个元素时,程序会呈现字段名称和可编辑值控件的表格表示。

基本上,您将程序的功能分为两类:用户想要对行执行的操作(添加、删除、重新排序、选择)以及用户想要对所选行的元素执行的操作。

如果您使用 DataGridView,您可以将这两组功能合并为一组,但正如您所看到的,如果您正在编辑的元素有任何复杂性,这会变得非常难看。

有两种可能的方法:属性表范例(选择对象,右键单击,选择“属性”,在模式对话框中编辑值),或者窗口分为两个面板的范例,一个是行,一个是其他是当前所选行的详细信息。还有很多其他的。

A typical UI paradigm for this kind of thing is to view it as two separate problems: giving the user a way of viewing the elements that he can modify, and giving him the ability to modify any specific element. You use a list control (ListBox, ListView, maybe TreeView if the elements are organized hierarchically or need to be grouped into categories) to present the elements, and then when the user selects an element the program presents a tabular presentation of field names and editable value controls.

Basically, you're dividing the program's functionality into two categories: stuff that the user wants to do to rows (add, remove, re-order, select) and stuff that the user wants to do to the selected row's elements.

You can mush these two sets of functionality into one if you use a DataGridView, but as you've seen that gets pretty ugly if there's any complexity to the elements you're editing.

Two possible approaches to this: the property-sheet paradigm (select object, right-click, select "Properties", edit values in a modal dialog), or a paradigm where the window's split into two panels, with one being the rows and the other being the details of the currently selected row. There are lots of others.

爱,才寂寞 2024-08-17 09:02:46

你的平台是什么? Winforms?世界和平基金会?

您到底不喜欢使用数据网格来实现什么?部分问题在于,无论您是否喜欢,您都将编写数据网格 - 您本质上描述了数据网格的功能。如果可能的话,尝试使用其他人的数据网格,因为它会为您节省大量工作。通常,第 3 方数据网格应该是相当可定制的,并且您应该能够使其看起来像您想要的那样 - 并利用内置的排序、编辑、分组等。从头开始创建类似数据网格的控件并不容易并应尽可能避免。

您不必有一个普通的巨型数据网格 - 您可以创建一个自定义控件,以您喜欢的方式显示发票格式,仅在发票显示表格数据的地方出现实时数据网格,其格式设置为发票的组成部分本身。

What is your platform? Winforms? WPF?

What exactly did you dislike about using a datagrid for this? Part of the problem is that whether you like it or not, you're going to be coding a datagrid - you essentially described features of one. If at all possible try to use someone else's datagrid because it will save you a lot of work. Typically, 3rd party datagrids should be fairly customizable, and you should be able to make it look however you want - and take advantage of the built in sorting, editing, grouping, etc. Creating a datagrid-like control from scratch isn't easy and should be avoided if possible.

You don't have to have a plain giant datagrid - you can crate a custom control that displays the invoice formatted however you like, with a live datagrid appearing only where the invoice shows tabular data, formatted to appear as an integral part of the invoice itself.

我们的影子 2024-08-17 09:02:46

我正在做类似的事情,客户可以在将发票发送给客户之前编辑甚至删除发票的行项目。

他们当前运行业务的应用程序是 WebForms Intranet 应用程序,因此这是对其的扩展。因此他们可以相当轻松地添加/删除/编辑行。

但叶戈尔是对的。无论你做什么,你本质上都是在谈论数据网格。我想你想要一些“更干净”、更直观的东西吗?

简单是困难的。

I'm doing something similar, where the client can edit or even remove the line items for the invoice prior to sending it to the client.

The current app they run their business on is a WebForms Intranet application, so this is an extension to that. So they can add/remove/edit rows fairly easily.

But Egor is right. You're essentially talking about a datagrid no matter what you do. I take it you want something 'cleaner' and more intuitive?

Simplicity is difficult.

£烟消云散 2024-08-17 09:02:46

我会看看现有的内容,特别是发票,看看他们是如何做的。

不确定您的公司有多大,但是利用大型公司的应用程序和用户界面,在用户界面设计和测试中投入数千/数百万美元总是没有坏处的。

我会看一下以下任何一个(大多数提供免费试用,或者只是尝试搜索屏幕截图):

只是一些想法...希望这有帮助!

I would take a look at what is already out there, especially for invoices, and see how they are doing it.

Not sure how big your company is, but it never hurts to take advantage of the large company applications and user interfaces, the pour thousands/millions of dollars into user interface design and testing.

I would take a look at any of the following (most offer a free trial, or just try searching for screenshots):

Just some ideas ... hope this helps!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文